jquery阻止冒泡事件

什么是冒泡事件?

    子元素被包裹在父元素下,当同时给子元素绑定事件父元素绑定事件时,如果点击子元素,父元素上的事件也会被出发,顺序是子元素→父元素。

为什么要解决冒泡事件?

    当子元素和父元素同时绑定点击事件时,在点击子元素时,不希望父元素的事件也被触发。

如何解决冒泡事件?

  1.event.stopPropagation();

$(function() {
            $(".three").click(function(event) {
                event.stopPropagation();
            });
        });

定义和用法 

不再派发事件,终止事件在传播过程的捕获、目标处理或起泡阶段进一步传播。调用该方法后,该节点上处理该事件的处理程序将被调用,事件不再被分派到其他节点。

2.return false;

$(function() {
  $("#three").click(function(event) {
    return false;
  });
});
3.event.preventDefault();
$(function() {
    $(".three").click(function(event) {
         event.preventDefault(); 
    });
});

定义和用法

取消事件的默认动作。该方法将通知 Web 浏览器不要执行与事件关联的默认动作(如果存在这样的动作)。例如,如果 type 属性是 "submit",在事件传播的任意阶段可以调用任意的事件句柄,通过调用该方法,可以阻止提交表单。注意,如果 Event 对象的 cancelable 属性是 fasle,那么就没有默认动作,或者不能阻止默认动作。无论哪种情况,调用该方法都没有作用。

发布了212 篇原创文章 · 获赞 135 · 访问量 137万+

猜你喜欢

转载自blog.csdn.net/ystyaoshengting/article/details/103628986