檢測點擊了哪個錨點

Question

我有很多這樣的標簽

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

如何確定在changeFreq函數中單擊了changeFreq 。 我嘗試使用this指針，但它引用window對象。 我不能在這種情況下使用onclick事件

任何想法？

Answer 1

使用適當的事件處理程序。
標記

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

與

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

}

小提琴

Answer 2

如果您使用this在onclick標記它會通過a標記引用到你的函數。

http://jsfiddle.net/V3W38/例如

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

Java腳本

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

    return false;
}

Answer 3

這是一個只有一個事件偵聽器的解決方案。 這個想法是只附加一個聽眾，然后根據所單擊的內容委派該做什么。 這樣，您就沒有大量的聽眾來完成可以處理的工作。 遇到這個問題，這樣做可能會過大，但我確實想提供一個替代方法。

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

Answer 4

您是否嘗試在函數中添加輸入變量？

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

Answer 5

在此處輸入鏈接說明

如果單擊了錨標記，則返回的錨標記href或id將顯示在警報中。

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>