折口木木

一切伟大的思想和行动都有一个微不足道的开始

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

其实事件冒泡是经常遇到的一个问题,网上也有许多相关的文章。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 
}