出現的問題如下圖所示（截屏看不出來看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事件了。
完美解決
下面貼上實驗的代碼
<!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>