码迷,mamicode.com
首页 > 移动开发 > 详细

<JavaScript>使用onmousemove事件实现移动(拖拽)div 出现的关于offsetX的问题

时间:2019-12-07 12:24:50      阅读:112      评论:0      收藏:0      [点我收藏+]

标签: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的差值。坚决不用啊!!!

  1. 不用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>

<JavaScript>使用onmousemove事件实现移动(拖拽)div 出现的关于offsetX的问题

标签:can   name   top   ane   导致   oct   style   目标   png   

原文地址:https://www.cnblogs.com/isAndyWu/p/12000937.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!