javascript - js event中的offsetX 会触发到子元素中，应该怎么解决呢?

Question

用react结合原生的方法和事件做拖拽.

现在给触发元素设定mousedown，在down事件中给父容器添加mousemove事件。

父容器的mousemove事件找到e.offsetX也就是当前鼠标位置，然后把值添加到子元素中
那么现在的问题时，在触发父元素的move事件当中，如果移动到子元素身上它的e.offsetX就会是想对于子元素的那个值了。。。 这个问题请问大家怎么解决呢？ 有没有碰到过的.

Answer 1

来晚了~

直接上之前写过的代码, 主要是用在给antd table 加列拖拽功能时候写的.
原理很简单 记录x, 更新x, 阻止browser默认事件.

    $wraper.on({
              "mousemove.drag":function(e){
                      draging(e);
              },
              "mouseleave.drag":function(e){
                      endDrag(e);
              },
              "mouseup.drag":function(e){
                      endDrag(e);
              }
      });
    //开始拖拽
      var startDrag = function(e){
              if(isDraging) return;
              isDraging = true;
              dragX = e.clientX || e.pageX;// 缓存当前x坐标 做宽度的拖拽
              document.body.onselectstart = function(){return false};//禁止浏览器默认选中行为
              e.stopPropagation();
      }
    var endDrag = function(e){
              if(!isDraging) return;
              isDraging = false;
              document.body.onselectstart = function(){return true};//解除浏览器默认选中行为
              e.stopPropagation();
      };
    var draging = function(e){
              if(!isDraging) return;
              var X = e.clientX || e.pageX;
              var w = X-dragX;
              if($gridData.outerWidth() < 120 && w > 0) return ;
              dragX = X;
              xxx()//更新宽度方法
              e.stopPropagation();
              e.preventDefault();
      };

Answer 2

offsetX是什么鬼，明显应该用PageX/PageY吧。mouse事件绑在你要移动的那个元素上就OK了。

• 参考一张图轻松搞懂javascript event对象的clientX,offsetX,screenX,pageX区别

Answer 3

在事件捕获阶段处理，阻止冒泡。(￣ ‘i ￣;)

Answer 4

event.stopPropagation(),加到那个e.offsetX后面看中不中，^_^

Answer 5

判断元素 e.target === 父元素 时候获取

Answer 6

阻止冒泡
阻止默认事件

e.stopPropagation();
e.preventDefault();