码迷,mamicode.com
首页 > 其他好文 > 详细

阻止事件冒泡

时间:2015-04-12 17:37:34      阅读:162      评论:0      收藏:0      [点我收藏+]

标签:

< div id="one" onclick="alert(‘我是最外层‘);" > 
        < div id="two" onclick="alert(‘我是中间层‘);" >
            <  a id="hr_three" href="http://www.baidu.com" onclick="alert(‘我是最里层‘);">点击我< /a > 
        < /div >
<  /div  >

1.event.stopPropagation(); 
事件处理过程中,阻止了事件冒泡,但不会阻止默认行为(它就执行了超链接的跳转) 
2.return false; 
事件处理过程中,阻止了事件冒泡,也阻止了默认行为(比如刚才它就没有执行超链接的跳转) 
还有一种有冒泡有关的: 
3.event.preventDefault(); 
如果把它放在头部A标签的click事件中,点击“点击我”。 
会发现它依次弹出:我是最里层---->我是中间层---->我是最外层,但最后却没有跳转到百度 
它的作用是:事件处理过程中,不阻击事件冒泡,但阻击默认行为(它只执行所有弹框,却没有执行超链接跳转)

4.this和event.target的区别:

js中事件是会冒泡的,所以this是可以变化的,但event.target不会变化,它永远是直接接受事件的目标DOM元素;
this和event.target的相同点:
this和event.target都是dom对象,如果要使用jquey中的方法可以将他们转换为jquery对象:$(this)和$(event.target); 

5.js事件处理的兼容性函数:
var EventUtil = {
  addHandler: function(element, type, handler){
    if (element.addEventListener){
      element.addEventListener(type, handler, false);
    } else if (element.attachEvent){
      element.attachEvent("on" + type, handler);
    } else {
      element["on" + type] = handler;
    }
  },
  removeHandler: function(element, type, handler){
    if (element.removeEventListener){
      element.removeEventListener(type, handler, false);
    } else if (element.detachEvent){
      element.detachEvent("on" + type, handler);
    } else {
      element["on" + type] = null;
    }
  },
  getEvent: function(event){
    return event ? event : window.event;
  },
  getTarget: function(event){
    return event.target || event.srcElement;
  },
  preventDefault: function(event){
    if (event.preventDefault){
      event.preventDefault();
    } else {
      event.returnValue = false;
    }
  },
  stopPropagation: function(event){
    if (event.stopPropagation){
      event.stopPropagation();
    } else {
      event.cancelBubble = true;
    }
};

阻止事件冒泡

标签:

原文地址:http://www.cnblogs.com/gyx19930120/p/4419865.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!