标签：can name top ane 导致 oct style 目标 png
出现的问题如下图所示（截屏看不出来看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的差值。坚决不用啊！！！
完美解决
下面贴上实验的代码
=====================================================
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
#wrap{
width: 600px;
height: 600px;
border: 1px solid black;
/*background: url(./img/a.png);*/
}
.myPlane{
width: 66px;
height: 82px;
/*pointer-events: none;*/
/*background: url(./img/a.png);*/
border: 1px solid black;
position: absolute;
/*top: 480px;
left: 50%;
transform: translate3d(-50%,0,0);*/
}
</style>
</head>
<body>
<div id="wrap">
</div>
<script type="text/javascript">
var wrap = document.getElementById("wrap");
// wrap.onclick = function(){
// wrap.style.background = "url(./img/ba.png)";
// }
createMyplane();
function createMyplane (){
var myPlane = document.createElement("div");
myPlane.className= 'myPlane';
wrap.appendChild(myPlane);
move(myPlane);
}
function move(obj) {
wrap.onmousemove = function (e) {
var ev = e || window.event;
ev.preventDefault();
if (ev.stopPropagation) {
ev.stopPropagation();
}else{
ev.cancelBubble = true;
}
var currount_X = ev.offsetX;
var currount_Y = ev.offsetY;
console.log("x:"+ currount_X +" y:"+ currount_Y);
obj.style.top = currount_Y + 'px';
obj.style.left = currount_X + 'px';
}
}
</script>
</body>
</html>
<JavaScript>使用onmousemove事件实现移动（拖拽）div 出现的关于offsetX的问题
标签：can name top ane 导致 oct style 目标 png
原文地址：https://www.cnblogs.com/isAndyWu/p/12000937.html
