前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >javascript当中鼠标有截断现象(进入上层元素,没进入下层元素)的解决方案

javascript当中鼠标有截断现象(进入上层元素,没进入下层元素)的解决方案

作者头像
马克java社区
修改2020-12-24 10:25:56
3600
修改2020-12-24 10:25:56
举报
文章被收录于专栏:java大数据java大数据

例 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)

    {

        更多请见:https://blog.csdn.net/qq_43650923/article/details/102988342

本文系转载,前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文系转载前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档