博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
JS - 点击事件排除父级标签
阅读量:6151 次
发布时间:2019-06-21

本文共 2385 字,大约阅读时间需要 7 分钟。

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

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

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

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

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

 

转载地址:http://nnwfa.baihongyu.com/

你可能感兴趣的文章
Maven编译时跳过Test
查看>>
Spring Boot 整合Spring Security 和Swagger2 遇到的问题小结
查看>>
[20170628]12C ORA-54032.txt
查看>>
除以2
查看>>
高可用集群原理解析
查看>>
Nginx配置URL转向tomcat
查看>>
极客Web前端开发资源大荟萃#001
查看>>
让div固定在某个位置
查看>>
Java开发环境Docker镜像
查看>>
从无到有,WebService Apache Axis2初步实践
查看>>
任务调度(一)——jdk自带的Timer
查看>>
UIKit框架(15)PCH头文件
查看>>
整理看到的好的文档
查看>>
Linux磁盘管理和文件系统管理
查看>>
linux运维人员的成功面试总结案例分享
查看>>
Windows DHCP Server基于MAC地址过滤客户端请求实现IP地址的分配
查看>>
命令查询每个文件文件数
查看>>
《跟阿铭学Linux》第8章 文档的压缩与打包:课后习题与答案
查看>>
RAC表决磁盘管理和维护
查看>>
Apache通过mod_php5支持PHP
查看>>