事件侦听器不适用于锚点
[英]Event listener not working on anchor
问题描述
This may be a very dumb question, but I'm desperate right now. 
这可能是一个非常愚蠢的问题，但是我现在很绝望。 I'm trying to execute a javascript function by clicking on an anchor like this: 我试图通过单击这样的锚点来执行javascript函数：
<head>
<script type="text/javascript">
function myFunction() {
alert('It was clicked');
}
Anchor.addEventListener('click', myFunction, false);
</script>
</head>
…
<a href="#" id="Anchor">Click me</a>
But it's not working. 但这不起作用。
However, this works fine: 但是，这很好用：
<a href="javascript:myFunction()" id="Anchor">Click me</a>
And even this does: 甚至这样做：
<a href="#" onclick="myFunction()" id="Anchor">Click me</a>
What is the correct way to go? 正确的方法是什么？ What am I doing wrong? 我究竟做错了什么？ A jsfiddle for example here . 例如这里的jsfiddle 。
Extra info: 额外信息：
I have set up other events using the same method, but somehow the anchor is the only one that doesn't work. 我已经使用相同的方法设置了其他事件，但是以某种方式，锚点是唯一不起作用的事件。 Example: 例：
<script type="text/javascript">
function aFunction() {
AnElement.style.display = 'none';
}
window.addEventListener('load', aFunction, false);
</script>
And the element is hidden perfectly fine when the window has finished loading. 窗口加载完成后，元素被完美隐藏。
4 个解决方案
解决方案1
8 已采纳 2014-08-12 20:36:13
The problem is that you were placing your script on HEAD section. 问题是您将脚本放在HEAD部分。 Anchor doesn't exist by the time the script is executed and because of this you were getting Anchor is not defined . 执行脚本时Anchor不存在，因此您Anchor is not defined 。
Try this modified version that place the script after the html definition. 尝试将脚本放在html定义之后的此修改版本。
<a href="#" id="Anchor">Click me</a>
<script>
function myFunction() {
alert('It was clicked');
}
Anchor.addEventListener('click', myFunction, false);
</script>
解决方案2
4 2014-08-12 20:36:45
you shoul add your bind after pageload event, and use getElementById. 您应该在pageload事件之后添加绑定，并使用getElementById。
function myFunction() {
alert('It was clicked');
}
window.onload = function () {
document.getElementById('Anchor').addEventListener('click', myFunction, false);
}
解决方案3
3 2014-08-12 20:34:08
Just because you give the tag an id attribute like id="Anchor" doesn't mean you can call it directly from javascript like you do: Anchor.addEventListener('click', myFunction, false); 仅仅因为为标签赋予id属性，例如id="Anchor"并不意味着您可以像这样直接从javascript调用它： Anchor.addEventListener('click', myFunction, false);
You actually have to find the element before binding an event. 实际上，您必须在绑定事件之前找到该元素。
document.getElementById('Anchor').addEventListener('click', myFunction, false);
解决方案4
-1 2014-08-12 20:41:33
Anchor is an id. 锚点是一个ID。 The first character of an id should be a lower case (id="anchor"). id的第一个字符应为小写（id =“ anchor”）。 With document.getElementById(), you can query DOM elements using it's id. 使用document.getElementById（），您可以使用其ID查询DOM元素。
var domElement = document.getElementById("anchor");
When you are using JQuery, you could also use the following to get an element by it's id: 使用JQuery时，还可以使用以下代码通过其ID获取元素：
$("#anchor")
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.