Question

我想知道是否有一种简单的方法来检测我想要处理点击的div中出现的链接上的点击...

所以，有一个简单的HTML代码示例：

<div class="checkmark">
    <div class="box">&nbsp;</div>
    <div class="label">Checkbox label possibly <a href="/random" target="_blank">with an anchor</a>.</div>
</div>

因此，在此示例中，我使用一组<div>标记来创建复选标记。＆＃34;框＆＃34;是我显示一个小方块的地方，当选中时，也会显示复选标记（例如红十字）。

为了使复选标记按预期工作，我使用jQuery并在主<div>标记上捕获鼠标点击：

jQuery("checkmark").click(function(e){
    e.stopPropagation();
    e.preventDefault();

    jQuery("box", this).toggle("checked");
});

非常简单，效果很好（＆＃34;已检查＆＃34;类足以显示复选标记，因为可以使用CSS定义。）

但是，正如我们在示例中所看到的那样，＆＃34;标签＆＃34>包括一个锚。如果我单击锚点，我刚刚呈现的jQuery运行，但锚点什么都不做。如果我删除了stopPropagation（）和preventDefault（），则会点击锚点，但也会切换复选标记。

我想知道的是：是否有一种简单的方法来检查传播是否会触发锚点，在这种情况下，只需忽略＆＃34;复选标记＆＃34;码？

类似的东西：

jQuery("checkmark").click(function(e){
    if(!(anchor.clicked()))  // how do we do this?
    {
        e.stopPropagation();
        e.preventDefault();

        jQuery("box", this).toggle("checked");
    }
});

P.S。我不知道标签上是否有锚点。因此，发现必须在click（）函数中发生（除非有更好的设置，并且＆＃34;如果＆＃34;可能会以不同的方式发生）。

注意：这里我显示了一个target="blank"参数。在真正的交易中，我将实际打开一个弹出窗口，但这并没有真正有所作为。

Answer 1

这是event.target的用途。

例如，在这种情况下：

if($(e.target).is("a")) { 
   // It was the anchor element that was clicked
}

jsFiddle here

Answer 2

您可以使用事件delegateTarget属性来查看触发事件的DOM元素。

if($(e.delegateTarget).is("a"))
    // execute code

Answer 3

您可以添加此处理程序：

jQuery("checkmark a").click(function(e){
  e.stopPropagation();
}

它将阻止点击事件从链接冒泡到div，因此链接将被激活，并且事件永远不会到达将被停止的div。

我们可以检测是否在具有jQuery.click（）的DIV中单击了一个链接？

3 个答案: