$(document).ready(function(){
$("#switcher").click(function(event){ if(event.target==this) { $("#switcher .button").toggleClass("hidden"); } }); }); 此时的代码确保了被单击的元素是<div id="switcher">而不是其他后代元素。现在,单击按钮不会再折叠样式转化器,而单击边框则会触发折叠操作。 停止事件传播:
事件对象提供了一个.stopPropagation()方法,该方法可以完全阻止事件冒泡。与.target类似。 例子: $(document).ready(function(){ $("#switcher .button").click(function(event){ $("body").removeClass(); if(this.id=="switcher-narrow") { $("body").addClass("narrow"); } else if(this.id=="switcher-large") { $("body").addClass("large"); } $("#switcher .button").removeClass("selected"); $(this).addClass("selected"); event.stopPropagation();//停止事件传播 ); }); event.stopPropagation();可以有效的避免其他所有DOM元素响应这个事件 还有就是.preventDefault()方法则可以在触发默认操作之前终止事件。 对于只需触发一次,随后要立即解除绑定的情况也有一种简单方法为.one(),这个简写方法的用法:
$(document).ready(function(){ $("#switcher").one("click",toggleStyleSwitcher); }); 这样会使切换操作只发生一次,之后就再也不会发生。 |
|