首页 > Web开发 > 详细

JS-JQ-事件冒泡

时间:2017-11-29 19:33:32      阅读:222      评论:0      收藏:0      [点我收藏+]

一、冒泡的原理:

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

  自上而下的触发事件

二、解决方法:

  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-事件冒泡

原文:http://www.cnblogs.com/xiaoyangtian/p/7922118.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!