Javascript 检测单击了哪个锚点
我有很多这样的标签Javascript 检测单击了哪个锚点,javascript,html,anchor,Javascript,Html,Anchor,我有很多这样的标签 <a href="javascript:changeFreq()">Anchor 1</a> <a href="javascript:changeFreq()">Anchor 2</a> <a href="javascript:changeFreq()">Anchor 3</a> 如何识别在changeFreq功能中单击的a。 我试图使用这个指针,但它引用了窗口对象。 在此上下文中,我不能使用onc
<a href="javascript:changeFreq()">Anchor 1</a>
<a href="javascript:changeFreq()">Anchor 2</a>
<a href="javascript:changeFreq()">Anchor 3</a>
如何识别在changeFreq
功能中单击的a。
我试图使用这个
指针,但它引用了窗口
对象。
在此上下文中,我不能使用onclick
事件
有什么想法吗?使用合适的事件处理程序。
加价
<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');
对于(var i=0;i使用适当的事件处理程序。
加价
<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');
对于(var i=0;i如果在onclick
标记中使用此
,它将a
标记引用传递到函数中
e、 g
如果在onclick
标记中使用this
,它将a
标记引用传递到函数中
e、 g
您是否尝试在函数中添加输入变量
<a href="javascript:changeFreq(1)">Anchor 1</a>
<a href="javascript:changeFreq(2)">Anchor 2</a>
<a href="javascript:changeFreq(3)">Anchor 3</a>
您是否尝试在函数中添加输入变量
<a href="javascript:changeFreq(1)">Anchor 1</a>
<a href="javascript:changeFreq(2)">Anchor 2</a>
<a href="javascript:changeFreq(3)">Anchor 3</a>
如果单击锚定标记,则返回锚定标记href或id,并显示在警报中,您可以根据需要执行此操作
滑动分页
CSS
如果单击锚定标记,则返回锚定标记href或id,并显示在警报中,您可以根据需要执行此操作
滑动分页
CSS
这是一个只有一个事件侦听器的解决方案。其思想是只附加一个侦听器,然后根据单击的内容委派要执行的操作。这样一来,您就没有太多的侦听器来完成可以处理的工作。对于这个问题,这样做可能有些过分,但我确实想提供一个替代方案
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>
这是一个只有一个事件侦听器的解决方案。其思想是只附加一个侦听器,然后根据单击的内容委派要执行的操作。这样一来,您就没有太多的侦听器来执行您可以处理的任务。对于此问题,执行此操作可能有些过分,但我确实希望提供一个替代方案
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>
怎么样href=“#”onclick=“changeFreq()”
?这可能会给你一个合适的参考。简单的方法是给
他们自己的ID,这样你就可以参考。情况是,我可以编辑锚,只有changeFreq函数,那么href=“#”onclick=“changeFreq()”呢
?这可能会给你一个合适的参考。简单的方法是给
他们自己的ID,这样你就可以参考。情况是,我可以编辑锚,只有changeFreq函数,我知道事件处理更好,但如果你只想做简单的事情,这更简单。我知道事件处理更好,但这是sim卡如果你只想做一些简单的事情,请
$( "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"));
}
}
<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>
<!--
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>
// 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();
});