JS/jQuery事件冒泡一些相关方法

2016/05/12

其实事件冒泡是经常遇到的一个问题，网上也有许多相关的文章。jquery的写的比较详细（因为太简单），JS原生原理虽然是一样的，但是有些写法似乎有点让人心累，而且有些复制过来没效果，可能是我太菜了。所以为了防止跟我一样的菜鸟遇到同样的情况，我感觉有必要整理整理。

1.jQuery处理事件冒泡

首先上一个Demo:

在以上Demo中，点击Button之后会触发a标签的默认事件。那么该怎么解决呢？jquery本身就封装了一些很好的方法，在这里就只做简单的演示。

阻止默认行为：

HTML：

JQuery：

$(".eventBtn2").on("click", function (event) {
    alert("你点击了Button，但不会跳转！");
    event.preventDefault();
});

在上例中，我们使用jquery封装的preventDefaule()方法来阻止默认行为。

停止事件冒泡：

以下代码是没有停止事件冒泡的情况，点击按钮会触发两个事件，一个是我们需要的按钮的点击事件，一个是我们不需要的盒子点击事件。

HTML：

jQuery：

$(".eventBtn3").on("click", function () {
    alert("你点击了Button，但你点击确定后将会触发外层盒子的点击事件！");
});
$(".eventBox").on("click", function () {
    alert("触发了外层盒子的点击事件。")
});

下面是使用了停止事件冒泡的方法`stopPropagation()`，该方法会阻止事件中其他对象的时间处理函数被执行。

jQuery：

$(".eventBtn4").on("click", function (event) {
    alert("你点击了Button，不会触发外层盒子的点击事件！");
    event.stopPropagation();
});
$("#eventBox").on("click", function () {
    alert("触发了外层盒子的点击事件。")
})

改写上述两种方法：

在实际项目开发中，可能一个方法多个地方调用，不可避免的就会遇到同时对事件对象停止冒泡和默认行为，那我们可以在事件处理函数中返回false。这是对在时间对象上同时调用stopPrapagation()方法和preventDefault()方法的一种简写方式。那么这两种方法都可以改写为：

return false;

2.JS处理事件冒泡

如果使用JS来阻止事件冒泡，就要注意一个兼容性问题，在
停止事件冒泡
中w3c的方法是e.stopPropagation()，IE则是使用e.cancelBubble = true。stopPropagation也是事件对象(Event)的一个方法，作用是阻止目标元素的冒泡事件，但是会不阻止默认行为。

在
阻止默认事件
中w3c的方法是e.preventDefault()，IE则是使用e.returnValue = false。preventDefault它是事件对象(Event)的一个方法，作用是取消一个目标元素的默认行为。既然是说默认行为，当然是元素必须有默认行为才能被取消，如果元素本身就没有默认行为，调用当然就无效了。

在以下Demo中，既有事件冒泡，又有默认事件：

HTML:

那我们可以使用以下代码来处理所有行为，如果jquery中的return false。

JS：

//停止事件冒泡和阻止默认事件 
function stopEvent(e) {
    e = e || window.event;
    if (e.stopPropagation) e.stopPropagation(); else e.cancelBubble = true;
    if (e.preventDefault) e.preventDefault(); else e.returnValue = false;
}

//如何调用该方法 
function eventClick() {
    alert("通过onclick调用弹出框。");
    stopEvent();//这里可以不用传递任何值，也可以传递event 
}

Javascript jQuery

Dev .