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     }    
点击事件排除父级标签

 

转载于:https://www.cnblogs.com/danlis/p/6647063.html

参与评论 您还未登录,请先 登录 后发表或查看评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
©️2022 CSDN 皮肤主题:编程工作室 设计师:CSDN官方博客 返回首页
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、C币套餐、付费专栏及课程。

余额充值