最新文章专题视频专题问答1问答10问答100问答1000问答2000关键字专题1关键字专题50关键字专题500关键字专题1500TAG最新视频文章推荐1 推荐3 推荐5 推荐7 推荐9 推荐11 推荐13 推荐15 推荐17 推荐19 推荐21 推荐23 推荐25 推荐27 推荐29 推荐31 推荐33 推荐35 推荐37视频文章20视频文章30视频文章40视频文章50视频文章60 视频文章70视频文章80视频文章90视频文章100视频文章120视频文章140 视频2关键字专题关键字专题tag2tag3文章专题文章专题2文章索引1文章索引2文章索引3文章索引4文章索引5123456789101112131415文章专题3
当前位置: 首页 - 科技 - 知识百科 - 正文

关于event.cancelBubble和event.stopPropagation()的区别介绍_jquery

来源:动视网 责编:小采 时间:2020-11-27 21:01:42
文档

关于event.cancelBubble和event.stopPropagation()的区别介绍_jquery

关于event.cancelBubble和event.stopPropagation()的区别介绍_jquery:首先我在网上看到不少文章大体上分为两个(不正确)观点: 1. cancelBubble用于ie的阻止冒泡事件,event.stopPropagation()用于firefox和chrome等其他浏览器。 先不讲上面是对是错 先看一个例子:(测试环境:chrom5.0.275.7, moz3.6
推荐度:
导读关于event.cancelBubble和event.stopPropagation()的区别介绍_jquery:首先我在网上看到不少文章大体上分为两个(不正确)观点: 1. cancelBubble用于ie的阻止冒泡事件,event.stopPropagation()用于firefox和chrome等其他浏览器。 先不讲上面是对是错 先看一个例子:(测试环境:chrom5.0.275.7, moz3.6


首先我在网上看到不少文章大体上分为两个(不正确)观点:
1. cancelBubble用于ie的阻止冒泡事件,event.stopPropagation()用于firefox和chrome等其他浏览器。
先不讲上面是对是错
先看一个例子:(测试环境:chrom5.0.275.7, moz3.6.4, opera10.53, ie6,7,8)
代码如下:



无标题页



输出结果true
b,在 moz3.6.4版本内,是不能阻止body的onclick的,但是alert(event.cancelBubble);输出结果仍然是true ,我想这应该是event.cancelBubble只是给event添加一个属性,并且赋值为true;
当把js代码改成这样时:
代码如下:

function clickBtn(event)
{
event=event?event:window.event;
event.stopPropagation();
alert("123");
}


即可有效阻止。当然在chrome,opera中的 event.stopPropagation();也是有效的,
结论一:以上说明 event.cancelBubble在新版本chrome,opera浏览器中已经支持,就差moz了,其实个人认为event.cancelBubble比event.stopPropagation()更好,不仅从英文意思上。所以希望moz再发新版本 也支持。这样就兼容了
2.还有就是经常看的关于事件顺序的问题:
不完全准确的结论(自认为)
ie:源事件元素->>父级元素事件->>body-->>document
moz:等其他浏览器与上面相反
先看一个例子:
代码如下:



无标题页






function clickBtn(event)
{
event=event?event:window.event;
event.stopPropagation();
alert("123");
}




如果按照上面的观点 我现在点击button 事件从 body---->div----->button,,,,那么就是 先alertbody然后再触发div弹出123,由于阻止冒泡,所以button的click不会触发。
但经过我们测试。moz还是按照由内向外触发。正确的执行alert("btn")--->>alert("123")----阻止冒泡 不触发body的click事件
到这你是不是会怀疑上面不正确,不过上面的讲法对用addListenter和attachEvent添加的事件是正确的()。如:
代码如下:



无标题页



  • List Item1

  • List Item2



  • function init(){
    if(!!document.all){
    document.getElementById('li1').attachEvent('onclick', function(event){
    alert('li1');
    })
    document.getElementById('li2').attachEvent('onclick', function(event){
    alert('li2');
    })
    document.getElementById('ul').attachEvent('onclick', function(event){
    alert('ul');
    //event.cancelBubble = true;
    alert(event.stopPropagation);
    });
    }else{
    document.getElementById('li1').addEventListener('click', function(event){
    alert('li1');
    }, true)
    document.getElementById('li2').addEventListener('click', function(event){
    alert('li2');
    }, true)
    document.getElementById('ul').addEventListener('click', function(event){
    event=event?event:window.event;
    event.stopPropagation();
    alert('ul');
    }, true);
    }
    }
    init();




    用这种方法 是符合的。执行结果是触发ul的click事件然后由于阻止了冒泡所以此时你点击li时,其本身的click事件不触发。(顺便说一句,用这种动态添加事件的方法,好像 event.cancelBubble在moz中也有效了不过在chrome和moz中有区别)

    文档

    关于event.cancelBubble和event.stopPropagation()的区别介绍_jquery

    关于event.cancelBubble和event.stopPropagation()的区别介绍_jquery:首先我在网上看到不少文章大体上分为两个(不正确)观点: 1. cancelBubble用于ie的阻止冒泡事件,event.stopPropagation()用于firefox和chrome等其他浏览器。 先不讲上面是对是错 先看一个例子:(测试环境:chrom5.0.275.7, moz3.6
    推荐度:
    • 热门焦点

    最新推荐

    猜你喜欢

    热门推荐

    专题
    Top