jQuery如何检查目标是否为链接。

Question

我有一个全局函数来捕获点击事件。

$(document).click(function(e){
  //do something
  if(clickedOnLink)
    //do something
});

当目标是链接时，我希望能做一些额外的事情，但如果 <a> 标签实际上包围着一个 div（因为 HTML5 允许这样），目标将会是那个 div。

http://jsfiddle.net/Af37v/

- XCS

---

当你说“目标”时，你是指接收焦点的具有id的元素，因此与:target伪选择器匹配，还是指被点击以触发导航的元素？ - David Thomas

如果用户通过单击超链接将被重定向到另一个页面，我实际上想要“做其他事情”。 - XCS

我觉得在<a>标签内部放置<div>是无效的HTML。 - gen_Eric

它是HTML5。<a>可以包裹块元素。http://dev.w3.org/html5/markup/a.html#a-changes - XCS

但是，如果您将点击处理程序放在a元素（$（'a'））上，则它会告诉您它是一个链接，因为click会通过文档冒泡。 - David Thomas

Answer 1

您可以尝试查看您单击的元素是否为<a>标记或其子级。

$(document).click(function(e){
    if($(e.target).closest('a').length){
        alert('You clicked a link');
    }
    else{
        alert('You did not click a link');
    }
});

- gen_Eric

Answer 2

我认为使用is会比那些建议使用closest的答案具有更好的性能：

$(e.target).is('a, a *');

这个检查会判断元素本身是否是一个 a，或者它是否包含在一个 a 中。

这比使用 closest 更快，因为它将在元素本身上使用matches，而不需要像closest那样遍历DOM树。

- James Montagne

---

你为什么认为这样做更快？.is('a *') 到底是做什么的？ - XCS

@cristy 在支持的浏览器中，应该只使用matches。这是针对单个元素的单一调用，而不是解析整个DOM并检查每个元素。我将创建一个jsperf并更新答案。 - James Montagne

似乎无法在jsperf上添加更多的测试用例，但您可以查看匹配嵌套元素的测试：https://jsperf.com/a-or-in-a 我怀疑对于深度嵌套的元素，特别是那些不嵌套在'a'中的元素，差距应该会加大。 - James Montagne

这很酷，那浏览器支持呢？这在所有浏览器中都可以工作吗？ - XCS

@Cristy 感谢 jQuery，它应该在任何浏览器中都能工作。但是在那些不支持 matches 的非常旧的浏览器上，您可能无法看到性能方面的显着差异。 - James Montagne

Answer 3

试试这个

$(document).click(function(e){
  //do something
  if($(this).closest('a').length)
    //do something
});

- kreig

Answer 4

如果你要定位链接，可以使用 .is() 方法。

例如：

$(".element").on("click", function(e){
  if($(e.target).is("a")){
    //do your stuff
  }
});

编辑：

如果它被其他元素包围且在锚点标签内，那么您可以使用 closest() 并通过使用 length 检查它是否有锚点标签父级。

示例：

$(".element").on("click", function(e){
  if($(e.target).closest("a").length){
    //do your stuff
  }
});

- Ari

---

正如我在我的答案中所说，仅检查目标是否为链接是不够的。它可能在a标签内部。 - XCS

是的，没错，但这与被接受的答案完全相同。在页面上弄出重复答案只会让其变得混乱不堪，所以这并不是个好主意 :) - XCS

Answer 5

使用jQuery获取tagName属性 $("a").prop("tagName");

- Greg

---

这怎样帮助我实际检查点击是否会导致重定向呢？ - XCS

$("a").prop("tagName") == 'a'，然后检查该'a'是否包含一个div。 - SoluableNonagon

Answer 6

更新： 您可以检查目标是否为a，或者其父级是否为a。

$(function () {
    $(document).on('click', function (e) {
        $target = $(e.target);
        if ($target.closest('a').length > 0) {
            alert('i am an a');
        }
    });
});

http://jsfiddle.net/8jeGV/4/

- Robin Drexler

---

如果 $target 是 <a>，那么 .closest 将返回它。所以你只需要 $target.closest('a').length > 0，不需要检查 .is。 - gen_Eric

Answer 7

您可以测试是否在 <a> 下有一个 <div> 通过测试 .children() <div> 内部是否有任何内容。如果什么都没有，或者没有 <div>，if语句将返回 false。

我建议使用这段代码：

$(document).click(function(e){
    var willRedirect = ($('a[href="/"]').attr('href').indexOf('#') == -1 ? true : false),

    //run code

    if ( willRedirect === false ){
        e.preventDefault();

        //the link will not redirect

        if ( $(this).children('div').html() ){
            //there is a <div> inside <a> containing something
        }
        else {
            //there is no <div> inside <a>
        }
    }
    else {
        //the link is not pointing to your site
    }
});

- SeinopSys