使用onmousemove事件实现移动（拖拽）div 出现的关于offsetX的问题

出现的问题如下图所示（截屏看不出来看log）

再移动鼠标的过程中会不断的出现异常值导致拖动的div不断切换位置，回到左上角。

我以为是冒泡机制导致的所以添加了下面一段阻止冒泡，随便也阻止了默认事件，但是并没有效果

==================================================================

ev.preventDefault();

if (ev.stopPropagation) {     ev.stopPropagation(); }else{     ev.cancelBubble = true; }

==================================================================

原因就是offsetX 和offsetY:

发生事件的地点在事件源元素的坐标系统中的 x 坐标和 y 坐标.

mousemove事件触发的事件源元素在不断切换，当鼠标移动时会移动到div中这时 offset的源元素不再是父级的div而是移动的div 这是offset值是相对于移动的div 所以是较小的值 ，所以会回到左上角。

====================================

原因知道了就解决吧




1。不用offset 还不行吗我用 clientX 稳稳的没问题，百度上所有关于这个问题都是用clientX （相对于浏览器视口）可是这肯定不是最完美的解决方法啊 ，要是整个外层div是居中的 还得计算一下clientX和 相对于外层div的差值。坚决不用啊！！！

2. 不用clientX 有个小伙伴提议加一个判断  if（ev.target==外层div）{ 执行赋值 } 这样就可以了啊 判断一下事件源是外层还是内层，但是问题又出现了，这样当是内层的时候会不执行也就是会一卡一卡的，我想用这个做小游戏 一卡一卡这怎么能行呢！！

3.当我快要绝望的时候，我找到了 一个css的样式 pointer-events: none; 这个属性除了指示该元素不是鼠标事件的目标之外，值none表示鼠标事件“穿透”该元素并且指定该元素“下面”的任何东西。这样就不会出发触mousemove事件了。




完美解决

下面贴上实验的代码

=====================================================