找回密码
当前位置：前端开发者 > JavaScript > 正文

前端开发JS事件冒泡解析

2018-09-02 21:13:47 分类：JavaScript 阅读(172) 评论(0)
前端开发怎样禁止页面滚动 手游前端开发需要掌握 软件开发前端和后端的区别
首先我们来讲解一下事件冒泡的概念：####事件冒泡：一个事件会顺着他的层级一直往上传，一直传到document上为止，即从盒模型上看是从内到外的过程。

例如：
html 代码

<!DOCTYPE html>
<html lang=”en” onclick=”alert(‘html’)”>
<head>
    <meta charset=”UTF-8″>
    <title>事件流</title>
    <style type=”text/css”>
        div {
            padding: 100px;
        }
    </style>
</head>
<body onclick=”alert(‘body’)”>
    <div style=”background: #ccc” onclick=”alert(this.style.background)”>
        <div style=”background: green” onclick=”alert(this.style.background)”>
            <div style=”background: red” onclick=”alert(this.style.background)”>点我！！！</div>
        </div>
    </div>
</body>
</html>

这段代码中，我给不同的div设置了不同的颜色，并且给每一个div设置一个onclilk，希望他每次点击一下，弹出我所点击的对应区域的背景色。通过预览大家可以看出来，点击红色区域，首先弹出的是红色，关掉弹出框后接着弹出的是绿色，灰色，body，html。为什么会出现这样的bug？很简单，事件冒泡####onclick被最中间的div触发后一直向上级冒泡，最终到html停止。
那么浏览器中有哪些事件会冒泡？

既然有事件冒泡，而且容易出bug，那我们接下来就谈谈如何解决事件冒泡
####取消事件冒泡：event.cancelBubble=true
例如：
html 代码

<!DOCTYPE html>
<html lang=”en”>
<head>
    <meta charset=”UTF-8″>
    <title>事件冒泡实例</title>
    <style type=”text/css”>
        #div1 {
            width: 400px;
            height: 500px;
            background-color: #ccc;
            display: none;
        }
    </style>
</head>
<body>
    <input id=”btn” type=”button” value=”显示”></input>
    <div id=”div1″></div>
    <script type=”text/javascript”>
        var oBtn = document.getElementById(‘btn’);
        var oDiv = document.getElementById(‘div1’);
        oBtn.onclick = function (ev) {
            var oEvent = ev || event; //未加之前 事件会冒泡到document上，div会一闪而过
            oDiv.style.display = ‘block’;
            oEvent.cancelBubble = true;
        }
        document.onclick = function () {
            oDiv.style.display = ‘none’;
        }
    </script>
</body>
</html>

通过预览大家可以看到点击按钮，div出现，当点击任意地方，div消失，大家可以试着把oEvent.cancelBubble=true;这句注释掉再运行试试看，可以看到点击按钮没有反应。其实并不是没有反应，而是当鼠标点击button后，div很快显示一下，点击之后div的disblock变为block，但是事件立即冒泡到document上，div的display又被改为none。我们使用oEvent.cancelBubble=true;将事件冒泡阻止后，就没有问题了。

兼容性处理：由于IE下无法使用stopPropagation()函数，因此做以下兼容：
html 代码

function stopBubble(e) {
    if (e && e.stopPropagation) {
        //非IE
        e.stopPropagation()
    } else {
        //IE
        window.event.cancelBubble = true
    }
}

同时也可以使用jquery来阻止冒泡：
html 代码

$(‘.btn’).on(‘click’, function() {
    console.log(‘我是按钮哦！, 时间: ‘ + new Date().getMilliseconds())
    return false //阻止事件冒泡传播
})

学会前端开发需要多久 零基础 前端开发视频 视频项目前端开发管理

» 本文来自：前端开发者 » 《前端开发JS事件冒泡解析》
» 本文链接地址：https://www.rokub.com/5433.html
» 您也可以订阅本站：https://www.rokub.com
赞(0)
64K
标签：前端开发者

前端开发者

相关推荐

评论 抢沙发

评论前必须登录！

 

最新评论