检查事件目标是否为超链接

Question

我有一个大的div，里面包含着小的div、锚点和其他元素。在我的程序中，每个大的div都绑定了“mousedown”事件，并且在onMouseDown处理程序内部，我基本上检查event.target。

如果用户点击的是一个超链接项，我想要检查一下event.target是否为超链接，并且如果event.target是一个超链接，就导航到该链接。如何实现这个功能呢？

这是div和元素的结构。

<div class="camp-name">
    <span class="btnCampaign"><div class=""></div></span>
    <span class="campaign-name">
       <a href="http://www.google.com">Some Link here</a>
    </span>
</div>
<div class="campaign-name-sub">
   <span class="campaign-accountname">Some Text here</span>
   <span class="seprator">|</span>
   <span class="brandname">Some Text here</span>
</div>

JavaScript

var label = label.createElement("DIV");
label.innerHMTL = src //src is the above html that is seen here
    Plugin.addEventListener(label, "mousedown", params.onMouseDown);


Plugin.onMouseDown() = function(event) {
var target = (event.currentTarget) ? event.currentTarget : event.srcElement;
        if (target.tagName.toLowerCase() === "a" && target !== undefined) {
            console.log(target.href);
            Plugin.stopPropagation(event);
        }
};

- user1240679

---

你能放出一些代码吗？比如你的div是如何组织的等等。 - theshadowmonkey

@theshadowmonkey：已添加。当我点击<a>标签时，仍然只能获取到DIV作为event.target。我该如何解决这个问题？ - user1240679

我觉得事件是由父级DIV处理的。最好在Chrome中尝试使用console.log(event)，你应该能看到所有可以操作的参数。我认为这应该会在某个方向上有所帮助。 - theshadowmonkey

你能否发布你正在使用的确切JavaScript代码...我会写一个fiddle并对其进行尝试。 - theshadowmonkey

@theshadowmonkey：这里的问题是，我想编写不需要使用特定id/类的非侵入式JavaScript。如果编写类似于find()的东西（也许查找标记仍然可以），则在某种意义上是可以的，即如果a存在，则导航到它。如果我单击的元素与a标签不同，则不希望导航到该a标签链接。而是从我已经拥有的mouseDown事件中执行一些操作。 - user1240679

我重新修改了代码并在下面进行了更新...请看一下。 - theshadowmonkey

Answer 1

你应该通过理解它

if(event.target.tagName.toLowerCase() === 'a')
{
    event.target.href; //this is the url where the anchor tag points to.
}

- Parthik Gosar

---

和什么进行比较？（我知道，但你应该包含它以获得完整的答案。） - Evan Davis

这意味着如果 (event.target.tagname === 'a') {window.location.href = event.target} 。在 JavaScript 中应该如何正确书写？ - user1240679

你能否指出我提取的 event.target 内部值的方法？是 event.target.valueOf() 吗？ - user1240679

@ParthikGosar：谢谢！但我检查了一下，发现@theshadownmonkey正在寻找正确的信息。当我点击那个<a> </a>标签时，我仍然得到event.target作为DIV。有出路吗？我已经在上面的帖子中添加了element strcutre（很容易不用jQuery就能构建整个东西，因为我不想在其中编写jQuery代码）。 - user1240679

Answer 2

你可以像@parthik-gosar所说的那样检查tagName属性。另一种方法是使用instanceof运算符来检查元素类（超链接属于类型HTMLAnchorElement）：

if (event.target instanceof HTMLAnchorElement) {
  console.log(event.target.href);
}

- CedX

Answer 3

我尝试修改了你的代码，并发现了多个问题并进行了修正。

这部分是JavaScript代码。

var src = '<div class="camp-name"><span class="btnCampaign"><div class=""></div></span><span class="campaign-name"><a href="http://www.google.com">Some Link here</a></span></div>';

var label = document.createElement('DIV')
label.innerHTML = src;
var topdiv = document.getElementById("test");
console.log(label)
topdiv.appendChild(label);

label.addEventListener('click', test, false);

function test(event) {
    if(event.target.tagName.toLowerCase() === 'a') {
        var href = event.target.href;
        console.log(href);
    }
    window.location = href;
};

这是它的 HTML 部分

<div id="test">
 test
</div>

我在jsfiddle上完成了这个http://jsfiddle.net/KDejm/1/。

请告诉我是否正确捕获了事件。

- theshadowmonkey

---

问题在于我想编写不使用特定id/class的非侵入式JavaScript，如果编写类似find()的内容（可能仍然可以查找标签，如果存在a，则导航到它是可以的），如果我单击的元素不是a标签，则不希望导航到该a标签链接。相反，从我已经拥有的mouseDown事件中执行某些操作。 - user1240679

在我的JavaScript中，我有一个更大的div，正如我在我的帖子中所写的那样，这个更大的div正在从某个地方获取HTML并通过.innerHTML显示它。那个更大的div是绑定了mousedown事件的，我不允许更改那个特定的代码。因此，本质上，我正在寻找一种方法来检查event.target是否具有锚标记（如果有，则导航）。另外，由于之前的编码风格，现在不允许使用jQuery。 - user1240679

@user1240679 更新了fiddle和答案以反映您的更改。 - theshadowmonkey