Check if event target is hyperlink

JavascriptHtml

Javascript Problem Overview


I have a large div inside there which are smaller divs, achor tags and other elements. Each large div in my program is bound to "mousedown" event and inside the onMouseDown handler, I basically check the event.target.

If a user clicks on an items that is a hyper link, I want to check if event.target was hyperlink and then navigate to that link if event.target was a hyperlink. How can that be done?

Here's the structure of the divsa and elements.

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

JS

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

Javascript Solutions


Solution 1 - Javascript

You should get it through

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

Solution 2 - Javascript

You could check the tagName property, as said by @parthik-gosar. Another way is to use the instanceof operator to check the element class (hyperlinks are of type HTMLAnchorElement):

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

Solution 3 - Javascript

I tried modifying your code and there were multiple problems with the code and corrected them.

This is the JavaScript part

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

This is the HTML part of it

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

I did this in a jsfiddle http://jsfiddle.net/KDejm/1/

Please let me know if the vent is captured correctly.

Attributions

All content for this solution is sourced from the original question on Stackoverflow.

The content on this page is licensed under the Attribution-ShareAlike 4.0 International (CC BY-SA 4.0) license.

Content TypeOriginal AuthorOriginal Content on Stackoverflow
Questionuser1240679View Question on Stackoverflow
Solution 1 - JavascriptParthik GosarView Answer on Stackoverflow
Solution 2 - JavascriptCedXView Answer on Stackoverflow
Solution 3 - JavascripttheshadowmonkeyView Answer on Stackoverflow