JS - 点击事件排除父级标签

点击事件排除父级标签,这里使用的是stopPropagation()方法。event.stopPropagation();

对了,这里还用了解除click事件,unbind。

下面这篇博文,介绍挺全的

http://www.cnblogs.com/zhangq723/archive/2011/04/02/2003358.html

把文章拷贝了一下,在这个折叠中。

移除事件

    unbind(type [,data])     //data是要移除的函数

    $('#btn').unbind("click"); //移除click

    $('#btn').unbind(); //移除所有
    对于只需要触发一次的,随后就要立即解除绑定的情况,用one()

    $('#btn').one("click",function(){.......});
    模拟操作

    可以用trigger()方法完成模拟操作。

    $('#btn').trigger("click");
    $('#btn').click();

    触发自定义事件

    $('#btn').bind("myclick",function(){....});

    $('#btn').trigger("myclick");
    传递数据

    trigger(type [,data])

    $('#btn').bind("myclick",function(event,message1,message2){...........});

    $('#btn').trigger("myclick",["传给message1","传给message2"]);

    执行默认操作
    $("input").trigger("focus");

        //不仅会触发input元素绑定的focus事件,还会触发默认操作——得到焦点。

    $("input").triggerHandler("focus");

        //只触发绑定事件,不执行浏览器默认操作

    其他用法

    绑定多个事件类型

    $("div").bind("mouseover mouseout",function(){.....});

    添加事件命名空间

    $("div").bind("click.plugin",function(){......});

    在所绑定的世界类型后面添加命名空间,这样在删除事件时只需要指定命名空间即可。

        $("div").unbind(".plugin");   //删除空间内的事件

    $("div").trigger("click!"); //触发所以不包含在命名空间中的click方法

    如果包含在命名空间的也要触发:

        $("div").trigger("click");
绑定相关

 

stopPropagation() 方法介绍:

定义和用法

不再派发事件。

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

语法

event.stopPropagation()

说明

该方法将停止事件的传播,阻止它被分派到其他 Document 节点。在事件传播的任何阶段都可以调用它。注意,虽然该方法不能阻止同一个 Document 节点上的其他事件句柄被调用,但是它可以阻止把事件分派到其他节点。

 1 //一级类别点击设置
 2     function setFirstClick() {
 3         var fa = $('.first-sort .a');
 4         fa.unbind(); //移除所有
 5         fa.each(function (i) {
 6             $(fa[i]).click(function () {
 7                    alert(1)
 8             });
 9         });
10     }
11     
12     //二级类别点击设置
13     function setSecondClick() {
14         var fb = $('.first-sort .a.select .second-sort .b');
15         fb.unbind(); //移除所有
16         fb.each(function (i) {
17             $(fb[i]).click(function (event) {
18                alert(2);
19                 event.stopPropagation();
20             });
21         });
22     }
23 
24     //三级类别点击设置
25     function setThirdClick() {
26         var fc = $('.first-sort .a.select .second-sort .b.select .third-sort .c');
27         fc.unbind(); //移除所有
28         fc.each(function (i) {
29             $(fc[i]).click(function (event) {
30               alert(3);
31                 event.stopPropagation();
32             });
33         });
34     }    
点击事件排除父级标签

 

posted @ 2017-03-30 16:59  Danlis  阅读(1973)  评论(0编辑  收藏  举报