javascript当中鼠标有截断现象（进入上层元素，没进入下层元素）的解决方案

2021/11/27 20:40:19

编程Tag： javascript 元素 var 鼠标 event getElementById document Car clientX

本文主要是介绍javascript当中鼠标有截断现象（进入上层元素，没进入下层元素）的解决方案，对大家解决编程问题具有一定的参考价值，需要的程序猿们随着小编来一起学习吧！

例 12.2 onm ousemove事件

马克-to-win：本例子中两个元素，不是嵌套重合元素（参见第10节），所以事件肯定先进入上层元素，所以鼠标有截断现象（进入上层元素，没进入下层元素）解决方案见下面一个例子。

<head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8"/>
<div id="divtest" style="position:absolute;width:300px;height:300px;background:#999;">
</div>

<div id="img" style=" z-index:1; position:absolute; width:0px; height:0px; left:0px;top:0px"><img src="1.jpg" /></div>

<script>
    var car = document.getElementById("img");

    function move(event)
    {
        var event = event || window.event;
        car.style.left = event.clientX ;
        car.style.top = event.clientY;
    }
    document.getElementById("divtest").οnmοusemοve=move;
</script>

例 12.2_b
马克-to-win：本例通过事件派发解决上个例子的问题。

<head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8"/>
<div id="divtest" style="position:absolute;width:300px;height:300px;background:#999;">
</div>

<div id="img" style=" z-index:1; position:absolute; width:0px; height:0px; left:0px;top:0px"><img src="1.jpg" /></div>

<script>
    var car = document.getElementById("img");
    var myEventx;
    var myEventy;
    function move(event)
    {

        var event = event || window.event;
//   alert("move");
/*你会发现，除正常以外，当dispatchEvent时，event.clientX总为undefined，所以提前就得myEventx=event.clientX;*/
   //      alert("ok"+"event.clientX is "+event.clientX);
        if(event.clientX==undefined) event.clientX=myEventx;
        if(event.clientY==undefined) event.clientY=myEventy;
        car.style.left = event.clientX ;
        car.style.top = event.clientY;
    }


        function move1(event)
    {
           var t = document.getElementById('divtest')
            var event = event || window.event;
       //     alert("ok11111"+"event.clientX is "+event.clientX);
/*下面两句话是dispatchEvent时才用到。*/

            {
                var evt = document.createEvent('HTMLEvents');
                evt.initEvent('mousemove', true, true);
                t.dispatchEvent(evt);
            }
    }


    document.getElementById("divtest").οnmοusemοve=move;
    document.getElementById("img").οnmοusemοve=move1;
</script>

更多内容请见原文，文章转载自：https://blog.csdn.net/qq_43650923/article/details/102988342

这篇关于javascript当中鼠标有截断现象（进入上层元素，没进入下层元素）的解决方案的文章就介绍到这儿，希望我们推荐的文章对大家有所帮助，也希望大家多多支持为之网！

javascript当中鼠标有截断现象（进入上层元素，没进入下层元素）的解决方案

相关编程文章