jquery处理事件冒泡

2019独角兽企业重金招聘Python工程师标准>>>

<!-- lang: html -->
<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>，这三个元素都处在用户的鼠标指针之下，而<p>元素则与这次交互操作无关。

事件捕获是首先交给最外层的元素处理，然后一层一层传到<a>

另一种相反的策略是最具体的元素先获得响应机会，然后再冒泡到更一般的元素。

解决的办法：

例子： <!-- lang: html --> <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'); } })

确保被单击的元素是<div id="switcher">，而不是外面的元素

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();

转载于:https://my.oschina.net/u/933915/blog/309014