比如下面这种:
HTML:
<p class="hello"> <a href="http://example.com" target="_blank" id="link">link</a> <p>say hello world to everynone</P> </p>
jQuery:
$('.hello').click(function() { $('p').toggleClass('hidden'); });
1. 当点击 .hello 任何区域都能将 p 隐藏,但我不希望点击 #link 的时候 p 也隐藏,应该如何做呢?
2. 当 #link 绑定了其他的 js 事件时,又该如何做呢?
http://jsfiddle.net/H26rM/
迷茫2017-04-10 12:44:34
手册一定要认真看啊,jquery手册,搜索bind函数,底部有专门的例子说明
通过使用 preventDefault() 方法只取消默认的行为。
比如某个表单本来点击submit是提交的,但是如果加入了event.preventDefatult() 则默认的submit行为就失效了
$("form").bind("submit", function(event){ event.preventDefault(); });
通过使用 stopPropagation() 方法只阻止一个事件起泡。事件的冒泡三言两语说不清楚,去百度查吧,很多
http://jsfiddle.net/H26rM/1/
黄舟2017-04-10 12:44:34
可以用JQuery的stopPropagation()方法来阻止事件冒泡。
link点击的时候处理一下:
$('#link').click(function(e){ e.stopPropagation(); });
阿神2017-04-10 12:44:34
$('.hello').click(function(e){ if(e.target.tagName != 'A' ){ $('p').toggleClass('hidden'); } });
判断一下点击事件的目标节点即可,当 #link 绑定了其他的 js 事件时这样处理也没问题。