防止点击事件触发父级操作

Prevent click event triggering parent action

本文关键字：操作 事件      更新时间：2023-09-26

我有包含用于删除该特定li的锚标记的lis。所以，我有锚标签和 li 的点击事件。单击li会打开一个模态窗口，单击锚标记应该隐藏该li。

如何在不触发点击事件

的情况下触发锚点标签上的点击事件。这是我到目前为止所厌倦的：

.JS：

$('body').on('click', 'a', function(e) {
    if(confirm('Are you sure you want to delete it?') == true){
        $(this).parent().hide();
    }
    //e.preventDefault();     
    e.stopPropagation();   
});

.HTML：

<li onclick="openModal(0)">
  <a class="closer">X</a>
  <h3>Lolita</h3>
  <p>Check it</p>
</li>

这是你的答案的一个小提琴：https://jsfiddle.net/jimedelstein/bsg4jq3m/

您需要检测点击的目标，如果是链接忽略它，否则触发 li 点击。

<li>
  <a class="closer">X</a>
  <h3>Lolita</h3>
  <p>Check it</p>
</li>

$('body').on('click', 'a', function(e) {
    if(confirm('Are you sure you want to delete it?') == true){
        $(this).parent().hide();
    } 
    e.stopPropagation();   
});
function openModal(e){
    if (e.target != $("a.closer")[0]){
     alert("not the link!");
  }
};
$("li").on("click", openModal);
相关文章：