JS笔记事件的冒泡

最新推荐文章于 2024-10-31 22:54:55 发布

言人冰

最新推荐文章于 2024-10-31 22:54:55 发布

阅读量129

点赞数

分类专栏：《JavaScript笔记》文章标签： javascript

本文链接：https://blog.csdn.net/YRB20/article/details/118076978

版权

《JavaScript笔记》专栏收录该内容

11 篇文章 0 订阅

订阅专栏

何为事件的冒泡？

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>草稿</title>
    <style type="text/css">
        #box1{
                width:100px;
                height:100px;
                border-radius: 70%;
                padding: 20px;
               background-image: url(../事件的冒泡/小偷.jpg);
               background-size: 100%;
               /* 一定不要忘了为box1开启绝对定位 */
               position: absolute;
           }
           #box2{
               width: 400px;
               height: 400px;
               border: 2px solid red;
               position: fixed;
               margin-top: 200px;
               margin-left: 45%;
               padding: 30px;
               padding-top: 70px;
               text-align: center;
           }
        </style>
    <script type="text/javascript">
window.onload = function(){
var box1 = document.getElementById("box1");
document.onmousemove = function(event){
 event = event = event || window.event;
//  鼠标的坐标
  var left = event.clientX;
  var top = event.clientY;
  
 //在考虑浏览器兼容的情况下，求出“滚动条的长度”
 var st = document.body.scrollTop || document.documentElement.scrollTop;//竖直
 var sl = document.body.scrollLeft || document.documentElement.scrollLeft;//水平 
 //div的偏移量
  box1.style.left = left + sl +"px";
  box1.style.top = top + st +"px";
};
var box2 = document.getElementById("box2");
box2.onmousemove = function(event){
    event = event = event || window.event;
    //取消box2的冒泡事件
    event.cancelBubble = true;
}
};


    </script>
</head>
<body>
    <div id="box1"></div>
    <div id="box2">
        <img src="../事件的冒泡/宝箱.jpg" width="200px" height="200px">
        <h1>你倒是进来抢黄金啊</h1>
    <img src="../事件的冒泡/警察.jpg" width="100px" height="100px">
    </div>
</body>
</html>