JS-JQ-事件冒泡

Posted 万里奔腾

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了JS-JQ-事件冒泡相关的知识,希望对你有一定的参考价值。

一、冒泡的原理:

  子元素会触发父元素的事件

  自上而下的触发事件

二、解决方法:

  JS:

     IE:event.cancelBubble=true  

     FF:event.stopPropagation()

  JQ:

      ev.stopPropagation()

 

 

!!! - CSS

<style>
  .div1{width:800px;height:500px;padding:100px;box-sizing: border-box;background:rosybrown;}
  .div2{width:500px;height:200px;background:#269ABC;}
</style>

 

!!! - html

<div class="div1">
  <div class="div2"></div>
</div>

 

!!! - javascript

window.onload=function()
{
  var div1=document.getElementsByClassName(‘div1‘)[0];
  var div2=document.getElementsByClassName(‘div2‘)[0];
  div1.onclick=function()
  {
    alert(‘我是DIV1‘);
  }
  div2.onclick=function(ev)
  {
    var oEvent=ev||event;
    if(ev.cancelBubble)
    {
      oEvent.cancelBubble=true;
    }
    else
    {
      oEvent.stopPropagation();
    }
    alert(‘我是DIV2‘);
  }
}

 

!!! - JQuery

$(function(){
  $(‘.div1‘).click(function(){
    alert(‘我是DIV1‘);
  });
  $(‘.div2‘).click(function(ev){
    alert(‘我是DIV2‘);
    ev.stopPropagation();
  });
})



































以上是关于JS-JQ-事件冒泡的主要内容,如果未能解决你的问题,请参考以下文章

jQuery事件冒泡及解决办法

事件冒泡以及取消事件冒泡方法

事件冒泡和事件捕获

HTML如何阻止事件冒泡?求源码分析

事件冒泡 & 阻止事件冒泡

vue阻止事件冒泡,事件穿透