Question

我有一些li个，包括a个链接，如下所示

<li>
  <span>SomeText</span>
  <a href='someurl' class='entityDetailModal'>sometext</a>
</li>

我正在使用第三方库（'LightGallery'），在click上添加Li个事件，并在Jquery我添加click个事件到链接显示一个对话框。问题是，当我点击链接时，两个点击事件都将被触发，

我的点击事件处理程序是

$('body').on("click", 'a.entityDetailModal', function (event) { 
    event.preventDefault(); 
    event.stopPropagation();
    loadDialog(this, event, '#mainContainer', true, true, false); 
    return false; 
});

我在链接onclick事件处理程序中尝试了event.stopPropagation()和event.preventDefault();以及return false;，但它们无效。

样品：http://jsfiddle.net/HuKab/30/

我怎样才能克服这个？

更新

似乎问题是我添加点击事件处理程序的方式，似乎一切都很好

$('a.entityDetailModal').click(function (event) { 
    event.preventDefault(); 
    event.stopPropagation();
    loadDialog(this, event, '#mainContainer', true, true, false); 
    return false; 
});

更新2

感谢@Huangism，这篇文章stackoverflow.com/questions/16492254/pros-and-cons-of-using-e-stoppropagation-to-prevent-event-bubbling正在解释原因。

Answer 1

使用stopPropagation（）;在子元素中

 $("li").click(function (e) {

    alert("li");
});

$("a").click(function (e) {
    e.preventDefault();     // stop the default action if u need 
    e.stopPropagation();
    alert("a");
});

DEMO

Answer 2

我不清楚你的问题究竟是什么。如果您只想摆脱li标记上的点击，可以使用jQuery中的.unbind()（请参阅：http://api.jquery.com/unbind/）。您应该只得到您的点击事件。

另一件可能有用的事情是使用类似的东西：

$("a").on('click.myContext', function(event) {
    //Your action goes here
}

通过这种方式，您可以使用$("a").on('click.myContext')启用并行事件，然后使用$("a").off('click.myContext')

关闭事件

编辑：使用：

$("a").on('click.myContext',function (e) {
    e.stopPropagation();
    alert("a");
});

参见工作示例：http://jsfiddle.net/bGBLz/4/

单击内部链接时阻止单击外部li

更新

更新2

2 个答案:

DEMO