在前端开发工作中,由于浏览器兼容性等问题,我们会经常用到“停止事件冒泡”和“阻止浏览器默认行为”。
浏览器默认行为:
在form中按回车键就会提交表单;单击鼠标右键就会弹出context menu.
a标签
1..停止事件冒泡
JavaScript代码
1 //如果提供了事件对象,则这是一个非IE浏览器2 if ( e && e.stopPropagation )3 //因此它支持W3C的stopPropagation()方法4 e.stopPropagation(); 5 else6 //否则,我们需要使用IE的方式来取消事件冒泡 7 window.event.cancelBubble = true;8 return false;
2.阻止浏览器的默认行为
JavaScript代码
1 element.|| window.event; 4 5 //如果提供了事件对象,则这是一个非IE浏览器 6 7 if (event&& event.preventDefault) { 8 9 //阻止默认浏览器动作(W3C) 10 11 event.preventDefault(); 12 13 } else { 14 15 //IE中阻止函数器默认动作的方式 16 17 window.event.returnValue = false; 18 19 } 20 21 //event.preventDefault?event.preventDefault():(event.returnValue = false); 22 23 }
或者直接返回false:
element.onclick = function(event) { //... return false; }
但是在使用return false时必须注意:
1、jQuery有自己的事件处理层,也对处理程序做了封装,如果事件处理程序返回false,事件冒泡和浏览器默认事件都会被阻止。
2、使用原生javaScript,在事件处理程序中返回false只会阻止浏览器默认行为,而事件冒泡依然存在。
3、浏览器默认行为和事件冒泡是相互独立的。阻止事件冒泡不会影响默认行为,反之亦然。
注意:
有一些浏览器行为是在事件处理程序执行前发生的,也就是说这些默认行为是无法取消的,如:在大部分浏览器上鼠标移到一个超链接上超链接的样式会发生改变,这个动作是发生在focus事件之前的,是focus事件处理程序中无法取消的。
本文转自 蓓蕾心晴 51CTO博客,原文链接:http://blog.51cto.com/beileixinqing/1903310,如需转载请自行联系原作者