您的位置：首页 > Web前端 > JavaScript

关于js中的事件冒泡和事件捕获问题

2017-02-16 10:27 375 查看
这两天我发现一个我理解事件冒泡的一个误区，其实事件冒泡指的是父元素和子元素同时绑定了点击事件，如果你不阻止冒泡的话，当你点击父元素是就只会触发父元素的事件，但是当你点击子元素的时候，他就会触发两个事件，举个例子：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script src="js/jquery.js"></script>
<style>
</style>
</head>
<body>
<div id="div1">1
<div id="div2">2</div>
</div>
</body>
<script>
$(function(){
$("#div1").click(function() {
alert("我是父元素");
});
$("#div2").click(function() {
alert("我是子元素");
});
})
</script>
</html>


当你点击div1的时候，只会弹出“我是父元素”，但是当你点击div2的时候，就会弹出“我是子元素”，“我是父元素”两条信息，这就是事件冒泡，其实事件冒泡分为两个阶段，一个是事件捕获，另一个就是事件冒泡，事件捕获的时候是从父元素向下捕获的，而事件冒泡是从子元素向上冒泡的，那么我想点击div2的时候就只弹出“我是子元素“而不弹出“我是父元素要怎么办呢，这时候就要用到阻止冒泡事件，只需要把代码改成：

$(function(){$("#div1").click(function() {alert("我是父元素");});$("#div2").click(function(e) {var e=e||event;e.stopImmediatePropagation();alert("我是子元素");});

就可以了，stopImmediatePropagation方法既能阻止事件的捕获过程也能阻止事件的捕获过程，当然还有return false和stopPropagation这两种方法，但是都没有这个的效果        这里只有两个div，如果有多个div怎么办呢？方法一样，只需要在最外层div的下一个div（也就是他的子元素，注意不是孙子）加上e.stopImmediatePropagation()就行了。  

之前我的理解误区是什么呢？比如说：
<div id="div1">1
<div id="div2">2
<div id="div3">3</div>
</div>
</div>

这里有三个div，我以为阻止冒泡就是给div1加一个事件，点击div2和div3的时候都不会触发div1的事件，这。。。所以这里就要注意了，事件冒泡事件冒泡，肯定指的是多个事件啊，一个事件他怎么去冒，在说了，div2和div3本来就是包含在div1里面的，点击div2和div3就相当与于点击了div1，所以你是没有办法阻止的，除非你把你的布局改一下，不要让div2和div3包含在div1里面，这样自然不会触发了。 





                                            

                                        

                        
                        内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息 
                    

                    

                    

                        

                         标签： 
                                                html
                                                web前端
                                                javascript
                                                

                        

                    


                

            


            

                
相关文章推荐

                

                
            

        

        

            

            
            

                

                    
新的分享

                    

                        
                    

                

            


            

                

                    
章节导航