javascript - Detect which anchor is clicked - Stack Overflow

admin管理员组

文章数量:1345287

I have many a tags like this

<a href="javascript:changeFreq()">Anchor 1</a>
<a href="javascript:changeFreq()">Anchor 2</a>
<a href="javascript:changeFreq()">Anchor 3</a>

How to indentify which a is clicked in changeFreq function. I tried to use this pointer but it refers window object. I can't use onclick event in this context

Any idea?

I have many a tags like this

<a href="javascript:changeFreq()">Anchor 1</a>
<a href="javascript:changeFreq()">Anchor 2</a>
<a href="javascript:changeFreq()">Anchor 3</a>

How to indentify which a is clicked in changeFreq function. I tried to use this pointer but it refers window object. I can't use onclick event in this context

Any idea?

• javascript
• html
• anchor

Share Improve this question Follow asked Apr 16, 2014 at 14:54 Taron MehrabyanTaron Mehrabyan 2,22933 gold badges2121 silver badges2727 bronze badges 3

• How about href="#" onclick="changeFreq()"? This should probably give you a proper this reference. – orhanhenrik Commented Apr 16, 2014 at 14:55
• 3 Easy way would be to give the <a> their own Ids so you can reference that. – kei Commented Apr 16, 2014 at 14:56
• Situation is so that I can edit anchors, only changeFreq function, – Taron Mehrabyan Commented Apr 16, 2014 at 15:00

Add a ment  | 

6 Answers 6

Sorted by: Reset to default 4

Use proper event handlers.
The markup

<a href="#" class="anchor">Anchor 1</a>
<a href="#" class="anchor">Anchor 2</a>
<a href="#" class="anchor">Anchor 3</a>

with

var anchors = document.querySelectorAll('.anchor');

for (var i=0; i<anchors.length; i++) {
    anchors[i].addEventListener('click', handler, false);
}

function handler() {

    // now "this" is the element

}

FIDDLE

Here's a solution with only one event listener. The idea is only attach one listener and then delegate what to do depending on what was clicked on. This way you don't have a ton of listeners to do the job that one could handle. With this problem, it might be overkill to do, but I did want to provide an alternative.

jsFiddle

HTML

<!--
Parent div to have the actual listener. 
Whenever an anchor is clicked, the event will bubble up to the #wrap div
-->
<div id="wrap">
   <!--Each div has a data-freq attribute to pass it's frequency-->
   <a id="a1" href="#" data-freq="1">Anchor 1</a><br>
   <a id="a2" href="#" data-freq="10">Anchor 2</a><br>
   <a id="a3" href="#" data-freq="100">Anchor 3</a><br>
</div>
<!--Print out the frequency-->
<div>Frequency: </div>
<div id="freq">0</div>

JS

// Get the important elements
var wrap = document.getElementById("wrap"),
        freqDiv = document.getElementById("freq");

// Function to let us change frequency
function changeFrequency(amount) {
   freqDiv.innerHTML = amount;
}

// Add only one event listener and let clicks bubble up
wrap.addEventListener("click", function(e) {
   // Change the frequency by the data-freq value
   changeFrequency(e.target.dataset["freq"]);
   // Don't change pages
   e.preventDefault();
});

if you use this in the onclick tag it will pass the a tag reference into your function.

http://jsfiddle/V3W38/ e.g.

<a href="#" onclick="return changeFreq(this)">Anchor 1</a>
<a href="#" onclick="return changeFreq(this)">Anchor 2</a>
<a href="#" onclick="return changeFreq(this)">Anchor 3</a>

Javascript

function changeFreq(element)
{
    // this is reference to the a tag you clicked on
    console.log(element.href);

    return false;
}

Did you jsut try to add an input variable in your function?

<a href="javascript:changeFreq(1)">Anchor 1</a>
<a href="javascript:changeFreq(2)">Anchor 2</a>
<a href="javascript:changeFreq(3)">Anchor 3</a>

js:

function changeFreq(anchorId){
     switch(anchorId){
         case 1:
         ///...
         break;
         //...
     }
}

enter link description here

if a anchor tag is clicked that anchor tags href or id is returned which is displayed in alert You can you this as you like

Jquery

$( "a" ).click( handler ).find( "a" );
function handler( event ) {
  var target = $( event.target );
  
  if ( target.is( "a" ) ) {
    alert(target.html());
        alert(target.attr("href"));
      alert(target.attr("id"));
  }
}

CSS

<a href="javascript:changeFreq(this)">Anchor 1</a>
<a href="javascript:changeFreq(this)">Anchor 2</a>
<a id="i1" href="javascript:changeFreq(this)">Anchor 3</a>

You can use an event listener by using jQuery. In my case i get the attribute href and target and perform some actions. You can use what ever you want there.

jQuery('a').click(function (e) {
    e.preventDefault();
    var url = jQuery(this).attr('href');
    var target = jQuery(this).attr('target');
    if (target === '_blank') {
        window.open(url, '_blank');
    } else {
        window.open(url, '_self');
    }
    
});

本文标签： javascriptDetect which anchor is clickedStack Overflow