首页 > 开发 > JS > 正文

jquery事件绑定父节点时,如何阻止对子节点事件的劫持?

2017-09-05 13:02:27  来源:网友分享

比如下面这种:

HTML:

u200b<div class="hello"><a href="http://example.com" target="_blank" id="link">link</a><p>say hello world to everynone</P></div>u200bu200bu200bu200bu200bu200bu200bu200bu200bu200bu200bu200bu200bu200bu200bu200bu200bu200bu200bu200bu200bu200bu200bu200bu200bu200bu200bu200bu200bu200bu200bu200bu200bu200bu200bu200bu200bu200bu200bu200bu200bu200bu200bu200bu200bu200bu200bu200bu200bu200bu200bu200bu200bu200bu200bu200bu200bu200bu200bu200bu200bu200bu200bu200bu200bu200bu200bu200bu200bu200bu200b

jQuery:

$('.hello').click(function() {    $('p').toggleClass('hidden');});u200b

1. 当点击 .hello 任何区域都能将 p 隐藏,但我不希望点击 #link 的时候 p 也隐藏,应该如何做呢?
2. 当 #link 绑定了其他的 js 事件时,又该如何做呢?

http://jsfiddle.net/H26rM/

解决方案

手册一定要认真看啊,jquery手册,搜索bind函数,底部有专门的例子说明
通过使用 preventDefault() 方法只取消默认的行为。
比如某个表单本来点击submit是提交的,但是如果加入了event.preventDefatult() 则默认的submit行为就失效了

$("form").bind("submit", function(event){  event.preventDefault();});

通过使用 stopPropagation() 方法只阻止一个事件起泡。事件的冒泡三言两语说不清楚,去百度查吧,很多
http://jsfiddle.net/H26rM/1/