.cancelBubble ——事件冒泡

一、基本信息

执行顺序：先是具体的，然后是一个个父级（如果有一个出去的事件触发了元素，元素就去执行这个函数，先是元素本身先执行）

事件冒泡机制描述： 当一个元素接收到事件的时候，会把他接收到的所有传给他的父级，一直到顶层window

var oDiv1 = document.getElementById('div1');
var oDiv2 = document.getElementById('div2');
var oDiv3 = document.getElementById('div3');
function fn1() {
    alert( this.id );
}
oDiv1.onclick = fn1;//告诉div1，如果他接收到了一个点击事件，那么他就去执行fn1.弹出div1
oDiv2.onclick = fn1;//点击div2，弹出div2，div1。如果取消这行代码只是取消了事件函数的绑定，并没有取消点击事件
oDiv3.onclick = fn1;
//如果点击div3，会弹div3，div2，div1，因为冒泡，会把点击事件一直传递给父级。而且每个父级的点击事件都绑定了函数，所以都执行弹出。如果有的父级没有绑定事件则那个父级不弹出

<div id="div1">
    <div id="div2">
        <div id="div3"></div>
    </div>
</div>

二、方法

1、给元素oDiv1加事件处理函数，也叫事件函数的绑定

oDiv1.onclick = fn1;

2、阻止冒泡

方法：在当前要阻止冒泡的事件函数中写：事件对象.cancelBubble = true;

注意：只能阻止当前对象的当前事件的冒泡

oBtn.onclick = function(ev) {
    var ev = ev || event;  //事件对象的浏览器兼容
    ev.cancelBubble = true;//阻止当前对象的当前事件的冒泡
    oDiv.style.display = 'block';  //只执行当前对象的点击事件，不执行父级的点击事件
}

三、技巧

1、如果很多元素都有相同的点击事件，只需要给这些元素共同的父级添加事件处理函数即可，因为有冒泡机制（见实例1）

四、实例

1、点击按钮显示，点击其他地方都隐藏div

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>无标题文档</title>
<style>
#div1 {width:100px; height:200px; border: 1px solid red; display: none;}
</style>
<script>
window.onload = function() {
    var oBtn = document.getElementById('btn');
    var oDiv = document.getElementById('div1');    
    oBtn.onclick = function(ev) {
        var ev = ev || event; //事件对象的浏览器兼容        
        ev.cancelBubble = true;//阻止当前对象的当前事件的冒泡        
        oDiv.style.display = 'block';
    }    
    document.onclick = function() {        
        oDiv.style.display = 'none';  //点击除了oBtn以外的元素都隐藏
    }    
}
</script>
</head>
<body>
    <input type="button" value="按钮" id="btn" />
    <div id="div1"></div>  
    <p>ppppp</p>
    <p>ppppp</p>
    <p>ppppp</p>
    <p>ppppp</p>
</body>
</html>

2、点击分享，从侧边弹出分享框

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>无标题文档</title>
<style>
#div1 {width: 100px; height: 200px; background: red; position: absolute; left: -100px; top: 100px;}
#div2 {width: 30px; height: 60px; position: absolute; right: -30px; top: 70px; background: black; color: white; text-align: center;}
</style>
<script>
window.onload = function() {    
    var oDiv = document.getElementById('div1');    
    oDiv.onmouseover = function() {
        this.style.left = '0px'; //当鼠标移动到div1及子元素身上的时候，div1红框显示
    }    
    oDiv.onmouseout = function() {
        this.style.left = '-100px'; //当移出区域滑出屏幕
    }    
}
</script>
</head>
<body>
    <div id="div1">
        <div id="div2">分享到</div>
    </div>
</body>
</html>

posted @ 2017-04-07 20:43 念念念不忘阅读(781) 评论(0) 收藏举报

刷新页面返回顶部

念念念不忘

.cancelBubble ——事件冒泡

公告