jquery处理事件冒泡
浏览数：28 /
时间：2015年06月09日
<div class="foo"> <!-- lang: html --> <span class="bar"> <!-- lang: html --> <a href="http://www.example.cm/“> <!-- lang: html --> </a> <!-- lang: html --> </span> <!-- lang: html --> <p> <!-- lang: html --> </p> <!-- lang: html --> </div>
但我们点击了<a>，这三个元素都处在用户的鼠标指针之下，而
元素则与这次交互操作无关。
另一种相反的策略是最具体的元素先获得响应机会，然后再冒泡到更一般的元素。
解决的办法：
例子：
<div id="container">
<!-- lang: html -->
<div id="switcher">
<!-- lang: html -->
<h3>Style Switcher</h3>
<!-- lang: html -->
<div class="button selected" id="switcher-default">
<!-- lang: html -->
Default
<!-- lang: html -->
</div>
<!-- lang: html -->
<div class="button" id="switcher-narrow">
<!-- lang: html -->
Narrow Column
<!-- lang: html -->
</div>
<!-- lang: html -->
<div class="button" id="switcher-large">
<!-- lang: html -->
Large Print
<!-- lang: html -->
</div>
<!-- lang: html -->
</div>
<!-- lang: html -->
</div> 1、事件目标
$(‘#switcher‘).click(function(event){
if(event.target == this){
$(‘#switcher .button‘).toggleClass(‘hidden‘);
}
})
确保被单击的元素是
，而不是外面的元素
2、下面的这种方法，虽然在跨浏览器中无法安全的使用，只要通过jquery来注册所有的事件就可以放心的使用。
$(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(); //避免其他所有的DOM元素响应这个事件，这样单击的事件只会被按钮处理。
});
});
默认是冒泡，如果取消冒泡可以采用：
cancelBubble=true
或者jquery的event.stopPropagation();
郑重声明：本站内容如果来自互联网及其他传播媒体，其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享，并不代表本站赞同其观点和对其真实性负责，也不构成任何其他建议。
