如何检测是否在 DIV 中单击了特定的类链接并覆盖 DIV 的单击操作？答案

【问题标题】：How to detect if a specific class link was clicked inside a DIV and override the DIV's click action then?如何检测是否在 DIV 中单击了特定的类链接并覆盖 DIV 的单击操作？
【发布时间】：2023-03-13 02:52:01
【问题描述】：

我的页面上有几个以下类型的 DIV：

<div class='entry'>
    This is a statement 
    <a title="Search @travel" class="app-context-link" href="">@travel</a>
</div>

当单击 .entry 类的 DIV 时，我会触发以下操作：

$(".entry").on('click', function(e) {
   console.log("DIV Clicked");
});

当点击 .app-context-link 类的链接时，我会触发以下内容：

var context_links = document.getElementsByClassName('app-context-link');

for (var k=0;k<context_links.length;++k) {
    context_links[k].addEventListener('click', function(e) {
        console.log("The context link inside DIV is clicked");
    });
}

问题：

现在，当我单击 app-context-link 时，两个动作似乎都被触发了：对于 DIV（因为检测到 .click 事件）和对于链接（因为该类的链接上有一个事件侦听器)。

如果点击链接，我如何使它不会触发点击 jQuery 的 DIV？

我尝试了几种可能性，但都没有奏效。此外，我不希望过多地重新组织代码，而只需在单击 jQuery 部分添加一些指令，以便它检测是否单击了链接，并且如果单击 DIV，则不会执行通常会执行的操作。

谢谢！

【问题讨论】：

既然您使用的是 jQuery，为什么不将它用于您的链接事件处理程序呢？只需使用 $('.entry').on('click', '.app-context-link', function (e) { ... });这将为您的.entry 添加一个委托处理程序，它将处理 div 中所有.app-context-link 的点击，而不是为每个链接添加 1 个处理程序。

标签： javascript jquery html onclick

【解决方案1】：

你可以这样使用

$(".entry").on('click', function(e) {
e.stopPropagation();
alert($(this).prop("tagName"));
});
$(".entry a").on('click', function(e) {
e.preventDefault();
 e.stopPropagation();
alert($(this).prop("tagName"));
});

DEMO

【讨论】：

【解决方案2】：

使用停止传播：

context_links[k].addEventListener('click', function(e) {
    e.stopPropagation(); //Here
    console.log("The context link inside DIV is clicked");
});

这将阻止点击事件冒泡，因此当您点击a时，不会触发其祖先的点击事件。

【讨论】：