您现在的位置: 365建站网 > 365学习 > 事件冒泡之cancelBubble和stoppropagation的用法和区别

事件冒泡之cancelBubble和stoppropagation的用法和区别

文章来源:365jz.com     点击数:200    更新时间:2018-05-30 12:05   参与评论
  事实上stoppropagation和cancelBubble的作用是一样的,都是用来阻止浏览器默认的事件冒泡行为。

不同之处在于stoppropagation属于w3c标准,试用于Firefox等浏览器,但是不支持IE浏览器。相反cancelBubble不符合W3C标准,而且只支持IE浏览器。所以很多时候,我们都要结合起来用。不过,cancelBubble在新版本chrome,opera浏览器中已经支持。

语法:e.stopPropagation();


参数e:表示事件传递的参数,代表事件的状态。
说明
该方法将停止事件的传播,阻止它被分派到其他 Document 节点。在事件传播的任何阶段都可以调用它。注意,虽然该方法不能阻止同一个 Document 节点上的其他事件句柄被调用,但是它可以阻止把事件分派到其他节点。

<HTML
<head
    <title>冒泡测试</title
</head
<body onclick="alert('body');"> 
 
    <div onclick="clickBtn(event)"  style="width:100px;height:100px; background:#666;"> 
        <input id="Button1" type="button" value="button" onclick="alert('btn');" /> 
    </div
    <script language="JavaScript" type="text/javascript"> 
        function clickBtn(event) 
        { 
            event=event?event:window.event; 
            event.stopPropagation(); 
            alert("OK"); 
        } 
    </script
</body
</html>  


虽然说cancelBubble可以在Chrome和Firefox中阻止冒泡,那是因为人家Chrome,Firefox 考虑周到,提供了这么一种可选的方式。 但是,cancelBubble已经不在标准中了,相信迟到它们会移除这一特性的,所以,为了靠谱起见,还是乖乖地该怎么用怎么用吧。
另外,jQuery的stopPropagation()已经做了兼容性处理:

jQuery.Event.prototype = {
    stopPropagation: function() {
        this.isPropagationStopped = returnTrue;

        var e = this.originalEvent;
        if ( !e ) {
            return;
        }
        // if stopPropagation exists run it on the original event
        if ( e.stopPropagation ) {
            e.stopPropagation();
        }
        // otherwise set the cancelBubble property of the original event to true (IE)
        e.cancelBubble = true;
    }
}

阻止js事件冒泡的例子(cancelBubble 、stopPropagation)

<!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xHTML1/DTD/xHTML1-transitional.dtd"> 
<HTML XMLns="http://www.w3.org/1999/xHTML" lang="gb2312"> 
<head
<title> 阻止JS事件冒泡传递(cancelBubble 、stopPropagation)</title
<meta name="keywords" content="JS,事件冒泡,cancelBubble,stopPropagation" /> 
<script
function doSomething (obj,evt) { 
alert(obj.id); 
var e=(evt)?evt:window.event; 
if (window.event) { 
  e.cancelBubble=true;// ie下阻止冒泡 
} else { 
  //e.preventDefault(); 
  e.stopPropagation();// 其它浏览器下阻止冒泡 


</script
</head
<body
<div id="parent1" onclick="alert(this.id)" style="width:250px;background-color:yellow"> 
<p>This is parent1 div.</p
<div id="child1" onclick="alert(this.id)" style="width:200px;background-color:orange"> 
  <p>This is child1.</p
</div
<p>This is parent1 div.</p
</div
<br /> 
<div id="parent2" onclick="alert(this.id)" style="width:250px;background-color:cyan;"> 
<p>This is parent2 div.</p
<div id="child2" onclick="doSomething(this,event);" style="width:200px;background-color:lightblue;"> 
  <p>This is child2. Will bubble.</p
</div
<p>This is parent2 div.</p
</div
</body
</HTML>  
<!-- 讲stopPropagation方法之前必需先给大家讲解一下js的事件代理。 
事件代理用到了两个在JavaSciprt事件中常被忽略的特性:事件冒泡以及目标元素。 
当一个元素上的事件被触发的时候,比如说鼠标点击了一个按钮,同样的事件将会在那个元素的所有祖先元素中被触发。 
这一过程被称为事件冒泡;这个事件从原始元素开始一直冒泡到DOM树的最上层。 
对任何一个事件来说,其目标元素都是原始元素,在我们的这个例子中也就是按钮。目标元素它在我们的事件对象中以属性的形式出现。 
使用事件代理的话我们可以把事件处理器添加到一个元素上,等待事件从它的子级元素里冒泡上来,并且可以很方便地判断出这个事件是从哪个元素开始的。 
 
stopPropagation方法就是起到阻止js事件冒泡的作用 
 
-->  

阻止事件冒泡,阻止默认事件,event.stopPropagation()和event.preventDefault(),return false的区别

今天来看看前端的冒泡和事件默认事件如何处理

1.event.stopPropagation()方法

这是阻止事件的冒泡方法,不让事件向documen上蔓延,但是默认事件任然会执行,当你掉用这个方法的时候,如果点击一个连接,这个连接仍然会被打开,

2.event.preventDefault()方法

这是阻止默认事件的方法,调用此方法是,连接不会被打开,但是会发生冒泡,冒泡会传递到上一层的父元素;

3.return false  ;

这个方法比较暴力,他会同事阻止事件冒泡也会阻止默认事件;写上此代码,连接不会被打开,事件也不会传递到上一层的父元素;可以理解为return false就等于同时调用了event.stopPropagation()和event.preventDefault()

4.我们来看看几组demo,使用jquery进行DOM操作

这是html代码,div里面套了一个a标签,连接到百度

<div class="box1"> 
            <a href="http://www.baidu.com" target="_blank"></a
        </div

CSS代码,a标签占父元素的空间的1/4,背景颜色为红色;

.box1{ 
                height: 200px; 
                width: 600px; 
                margin: 0 auto; 
            } 
            .box1 a{ 
                display: block; 
                height: 50%; 
                width: 50%; 
                background:red; 
            } 




下面来看js代码,第一种

//不阻止事件冒泡和默认事件 
             
            $(".box1").click(function(){ 
                console.log("1")//不阻止事件冒泡会打印1,页面跳转;              
            }); 





第二种

//阻止冒泡 
            $(".box1 a").click(function(event){ 
                event.stopPropagation();//不会打印1,但是页面会跳转;             
 
            }); 
             
            $(".box1").click(function(){ 
                console.log("1")                 
}); 







第三种

$(".box1 a").click(function(event){          
//阻止默认事件 
event.preventDefault();//页面不会跳转,但是会打印出1, 
}); 
             
$(".box1").click(function(){ 
console.log("1");                
}); 





第四种

$(".box1").click(function(){ 
console.log("1") 
});          
//阻止冒泡 
$(".box1 a").click(function(event){ 
event.stopPropagation();             
//阻止默认事件 
event.preventDefault() //页面不会跳转,也不会打印出1 
}) 





第五种

$(".box1").click(function(){ 
                console.log("1")                 
            });                                  
$(".box1 a").click(function(event){ 
                return false;  //页面不会跳转,也不会打印出1,等于同时调用了event.stopPropagation()和event.preventDefault() 
 
});  


如对本文有疑问,请提交到交流论坛,广大热心网友会为你解答!! 点击进入论坛


发表评论 (200人查看0条评论)
请自觉遵守互联网相关的政策法规,严禁发布色情、暴力、反动的言论。
用户名: 验证码: 点击我更换图片
最新评论
------分隔线----------------------------