前端开发JS事件冒泡解析

前端开发怎样禁止页面滚动 手游前端开发需要掌握 软件开发前端和后端的区别
首先我们来讲解一下事件冒泡的概念:####事件冒泡:一个事件会顺着他的层级一直往上传,一直传到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

评论 抢沙发

评论前必须登录!