javascript 阻止冒泡和浏览器的默认行为详解
来源：自学PHP网
时间：2014-09-19 14:47 作者：
阅读:次
[导读] 本文章来给大家介绍一个javascript 阻止冒泡和浏览器的默认行为一些实例，希望些方法对各位同学有所帮助哦。...
|
在使用javascript编程时会遇到一个问题,就是当你给html添加事件时,由于浏览器默认的为冒泡型事件触发机制,所以会触发你不想触发的事件.那么通过如下的函数可以解决这个问题。
1、阻止事件冒泡
| 代码如下 |
复制代码 |
|
function stopBubble(e) {
// 如果提供了事件对象，则这是一个非IE浏览器
if (e && e.stopPropagation) {
// 因此它支持W3C的stopPropagation()方法
e.stopPropagation();
} else {
// 否则，我们需要使用IE的方式来取消事件冒泡
window.event.cancelBubble = true;
}
}
|
2、阻止默认行为
当按键后或者点击一个链接后，不希望按键或者链接执行时,可以取消返回值.即停止默认事件默认行为
2.1、阻止链接
| 代码如下 |
复制代码 |
|
function stopDefault(e) {
// 阻止浏览器的默认行为
if (e && e.preventDefault) {
// 阻止默认浏览器动作(W3C)
e.preventDefault();
} else {
// IE中阻止函数器默认动作的方式
window.event.returnValue = false;
}
return false;
}
|
示例 : 点击页面的任何URL链接 不跳转。
| 代码如下 |
复制代码 |
|
var links = document.getElementsByTagName('a');
for (var i = 0; i < links.length; i++) {
links[i].onlick = function(e) {
alert('我不跳转，点我也没用');
stopDefault(e);
}
}
|
2.2、阻止下拉菜单
另一个阻止冒泡常见的应用就是下拉菜单的效果，点击按钮，下拉菜单显示，在点击页面任何其它部分，下拉菜单隐藏。
| 代码如下 |
复制代码 |
|
//给document添加点击事件，点击时关闭菜单，默认情况下，点击任何元素，都会冒泡的到document
document.onclick = function(){
b.style.display = "none";
}
//为点击元素显示下拉菜单的元素阻止冒泡，这样document的click事件就被阻止执行
function showMenu(e) {
var e = window.event || e;
b.style.display = "block";
if (e.stopPropagation) {
e.stopPropagation();
} else {
e.cancelBubble=true;
}
}
btn.onclick=b.onclick = showMenu;
|
3、Jquery阻止事件冒泡
如果使用jquery库的进行绑定dom的事件，处理方式则为：
| 代码如下 |
复制代码 |
|
$(selector).click(function(event) {
event.stopPropagation();
//do somethine
});
|
|
