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

最新推荐文章于 2022-05-19 19:32:04 发布

仔仔尔

最新推荐文章于 2022-05-19 19:32:04 发布

阅读量223

点赞数

分类专栏： javascript 前端文章标签： javascript

原文链接：https://blog.csdn.net/mark_to_win/article/details/88648025

版权

javascript 同时被 2 个专栏收录

73 篇文章 0 订阅

订阅专栏

前端

1 篇文章 0 订阅

订阅专栏

例 12.2 onmousemove事件

本例子中两个元素，不是嵌套重合元素（参见第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)
    {
        更多请见：http://www.mark-to-win.com/tutorial/js_4_EventTransparent.html

仔仔尔

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
javascript当中鼠标有截断现象（进入上层元素，没进入下层元素）的解决方案

例 12.2 onmousemove事件本例子中两个元素，不是嵌套重合元素（参见第10节），所以事件肯定先进入上层元素，所以鼠标有截断现象（进入上层元素，没进入下层元素）解决方案见下面一个例子。<head> <meta http-equiv="content-type" content="text/html; charset=utf-8"/><div ...
复制链接

扫一扫