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

【问题标题】：Check if event target is hyperlink检查事件目标是否为超链接
【发布时间】：2013-03-27 14:26:09
【问题描述】：

我有一个大 div 里面有更小的 div、achor 标签和其他元素。我程序中的每个大 div 都绑定到“mousedown”事件，在 onMouseDown 处理程序中，我基本上检查了 event.target。

如果用户单击作为超链接的项目，我想检查 event.target 是否是超链接，如果 event.target 是超链接，则导航到该链接。怎么可能？

这是 divsa 和元素的结构。

<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>

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);
        }
};

【问题讨论】：

你能放一些代码吗....比如你的 div 是如何组织的和东西
@theshadowmonkey ：添加。当我单击标记时，我仍然将 event.target 仅作为 DIV。我该如何解决这个问题？
我认为该事件正在由父 DIV 处理。最好在 Chrome 中尝试 console.log(event) ，您应该会看到所有可以操作的参数。我认为这应该在某些方面有所帮助
你能发布你正在使用的确切javascript吗...我会写一个小提琴并尝试一下
@theshadowmonkey：已添加。

标签： javascript html

【解决方案1】：

你应该通过它

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

【讨论】：

并将其与什么进行比较？（我知道，但你应该把它包括在内以获得完整的答案。）
这意味着 if (event.target.tagname === 'a') {window.location.href = event.target} 。这在 JavaScript 中是如何正确编写的？
你能不能指出我在那个 event.target 中的值是如何获取的？是 event.target.valueOf() 吗？
@ParthikGosar：谢谢！但我检查并发现@theshadownmonkey 要求提供正确的信息。当我单击那个<a> </a> 标签时，我仍然将 event.target 作为 DIV。有出路吗？我在上面的帖子中添加了element strcutre（很容易没有jquery，因为我已经简单地构建了整个东西并且不想将jQuery代码写入其中）。

【解决方案2】：

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

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

【讨论】：

【解决方案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/

如果通风口被正确捕获，请告诉我。

【讨论】：

这里的问题是，如果编写诸如 find() 之类的内容，我想在不使用特定 id/class 的情况下编写不引人注目的 javascript（从某种意义上说，如果 a 是那里，然后导航到它）如果我单击除 a 标签以外的元素，那么我不想导航到该标签链接。而是从我已经拥有的 mouseDown 事件中做一些事情
在我的 javascript 中，我有一个更大的 div，正如我在帖子中所写的，那个更大的 div 是从某个地方获取 HTMl 并通过 .innerHTML 显示它。那个更大的 div 是绑定了 mousedown 事件的那个，我不允许更改该特定代码。所以，从本质上讲，我一直在寻找一种方法来检查 event.target 是否有锚标记（如果有，则导航）另外，由于之前的编码风格，现在不允许使用 jQuery。
@user1240679 更新了小提琴和答案以反映您的更改