当前位置 : 主页 > 网页制作 > JQuery >

jquery 阻止冒泡事件

来源:互联网 收集:自由互联 发布时间:2021-06-15
什么是冒泡事件? 子元素被包裹在父元素下,当同时给子元素绑定事件父元素绑定事件时,如果点击子元素,父元素上的事件也会被出发,顺序是子元素→父元素。 为什么要解决冒泡

什么是冒泡事件?

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

为什么要解决冒泡事件?

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

如何解决冒泡事件?

  1.event.stopPropagation();

  

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

定义和用法

不再派发事件。

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


2.return false;

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

定义和用法

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

网友评论