Question

我有一个锚结构

<a href="#" class="someClass1">
  <span><img src="expand.png"/></span>
  <span><a class="someClass2" href="abc.html">abc</span>
</a>

现在两个锚点都定义了处理程序事件 -

$(".someClass1").click(function() { 
  //do something
  return false;
});

$(".someClass2").click(function() {
  return true;//navigate to link
});

现在我面临的问题是，如果用户单击img就可以了，只是为了扩展上下文菜单，但如果用户点击类someClass2的锚点，它应该导航到指定的页面，但是父处理程序会停止这个调用

由于某些其他原因，我无法将父处理程序从a.someClass1移动到span。那么有什么机制可以阻止父处理程序调用。

PS。这是来自Jquerymobile.js我用于我的wordpress网站主题创作。

JSFiddle：http://jsfiddle.net/subhash9/2VMm9/

Answer 1

您可能需要event.stopPropagation()来阻止事件在祖先层次结构中进一步传播。

$(".someClass2").click(function(event) {
   event.stopPropagation()
  // return true;//navigate to link
});

Answer 2

$(".someClass1").click(function(event) { 
     event.stopImmediatePropagation();
     event.preventDefault();//try this instead.
    //do something
});

$(".someClass2").click(function() {
return true;//navigate to link
});

http://api.jquery.com/event.stopImmediatePropagation/

在Javascript中停止父处理程序调用

2 个答案: