我有一个双重事件需要管理。这两个事件都是“click”,它们是用jquery处理的。 html如下:
<div class="siteMap" style="width:23%;">
<h5>Divisione Anticontraffazione</h5>
<span class="menufooter">
<span class="link1"><a href="#scheda1">Introduzione</a></span><br>
<span class="link2"><a href="#scheda2">Filosofia</a></span><br>
<span class="link3"><a href="#scheda3">Negozio online</a></span></span><br>
</div>
然后我的点击事件会在菜单内部范围内以及每个链接范围内触发。代码是这样的:
$(document).ready(function() {
$('span.menufooter').click(function() {
//my code here
});
$("span.link1").click(function() {
//my code here
});
});
我需要一个事件捕获操作,在span menu1上单击时,必须触发该事件才能触发事件。此时,两个事件都没有发射。任何提示?
答案 0 :(得分:4)
仅.menufooter
$(document).ready(function() {
$('span.menufooter').click(function(e) {
//my code here 1
// Capture Event Propagation
if ( $("span .link1").find(e.target).length>0 ){
//my code here 2
};
});
});
答案 1 :(得分:1)
您可以阻止点击冒泡,然后触发对父元素的点击,以便首先执行该处理程序中的任何内容(除非它是异步的)
$(document).ready(function () {
$('.menufooter').click(function () {
// fires before ....
});
$("span.link1").click(function (e) {
e.stopPropagation();
$('.menufooter').trigger('click');
// .... this fires, as it's triggered above
});
});
答案 2 :(得分:0)
试试这个event.stopPropagation();
$("span.link1").click(function(event) {
event.stopPropagation();
...
});
答案 3 :(得分:0)
我会有一个侦听包装器的单击侦听器。您可以检查事件的目标,看看他们是否实际点击了链接并相应地运行代码。
例如:
$(document).ready(function() {
$('.container').click(function(e) {
// Perform action when they clicked in the main wrapper,
// regardless of whether or not it was a link.
console.log("I clicked in the wrapper...");
if ($(e.target).hasClass('link')) {
// Perform action if they clicked on a link.
console.log("...but more specifically, on a link.");
}
});
});
这是一个证明这一点的小提琴:http://jsfiddle.net/WaYFr/