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