javascript - 防止点击内部链接时点击外部li

Question

我有一些li，其中包括如下a链接

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

我正在使用第三方库(“LightGallery”)，它在 Li 上添加了 click 事件，并且通过 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