使 onclick 处理程序忽略对链接的点击答案

【问题标题】：Make onclick handler ignore clicks on links使 onclick 处理程序忽略对链接的点击
【发布时间】：2009-09-22 08:23:45
【问题描述】：

我有一个块元素的自定义 onclick 处理程序（通过 jQuery 的 .click() 方法设置）。这个块元素可以包含链接。

我相当确定这是可能的，那么，如果我点击的是一个链接，我如何让处理程序简单地返回（以便在不运行我的代码的情况下访问该链接）？

【问题讨论】：

【解决方案1】：

检查事件对象，看目标是否为锚标签，然后返回true：

$("div").click(function(eventObject){

    if($(eventObject.target).is("a"))
        return true;

    //run your code
});

【讨论】：

由于点击目标也可能是链接的子（或后代），因此调用.closest("a").length == 0 比调用is("a") 更安全

【解决方案2】：

在您的点击事件中，您可以检查事件目标标记名是什么：

$("#myDiv").click(function(e) {
  if (e.target.tagName.toLowerCase() == "a") {
    return true; //link clicked
  } else {
    //run your usual div click code here...
  }
});

【讨论】：

谢谢！忘记了正在传递的事件。愚蠢的我。

【解决方案3】：

如何在点击功能中测试元素是否是锚点？

if(this.tagName() == "a")return true;

我没有测试，请检查并回复

【讨论】：

或 this.target 或 sumthing 只是一个评论，如果这不起作用：D

【解决方案4】：

如果您的链接有后代元素（例如<span> 或<img>），则检查event.target 的nodeName 不起作用。

相反，尝试从event.target（最深的元素）到event.currentTarget（事件处理程序注册的事件）向上走，并检查这些元素中的任何一个是否是可点击的：

$("div").click(function(event) {
    if (clickableBetweenTargetAndCurrentTarget(event))
        return; // This click was probably already handled.
    doSomething();
});

function clickableBetweenTargetAndCurrentTarget(event) {
    for (var el = event.target; el && el != event.currentTarget; el = el.parentNode) {
        if (isClickable(el))
            return true;
    }
    return false;
}

function isClickable(el) {
    // TODO: Customize this as appropriate for your webpage.
    return el.nodeName == 'A' || el.nodeName == 'BUTTON';
}

演示：http://jsbin.com/fojaco/2/

请注意，您必须为您的特定网页自定义 isClickable； hard/impossible 来判断一个元素在一般情况下是否可点击。

另一种方法是确保所有可点击的后代都调用event.preventDefault()，然后您在 div 上的点击侦听器只需要检查event.defaultPrevented (IE9+)。或者后代可以调用event.stopPropagation()，建议on another answer，但calling stopPropagation can lead to subtle bugs。

【讨论】：