点击事件排除父级标签,这里使用的是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 }