事件侦听器不适用于锚点
[英]Event listener not working on anchor
问题描述
这可能是一个非常愚蠢的问题，但是我现在很绝望。 我试图通过单击这样的锚点来执行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>
但这不起作用。
但是，这很好用：
<a href="javascript:myFunction()" id="Anchor">Click me</a>
甚至这样做：
<a href="#" onclick="myFunction()" id="Anchor">Click me</a>
正确的方法是什么？ 我究竟做错了什么？ 例如这里的jsfiddle 。
额外信息：
我已经使用相同的方法设置了其他事件，但是以某种方式，锚点是唯一不起作用的事件。 例：
<script type="text/javascript">
function aFunction() {
AnElement.style.display = 'none';
}
window.addEventListener('load', aFunction, false);
</script>
窗口加载完成后，元素被完美隐藏。
4 个解决方案
解决方案1
8 已采纳 2014-08-12 20:36:13
问题是您将脚本放在HEAD部分。 执行脚本时Anchor不存在，因此您Anchor is not defined 。
尝试将脚本放在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
您应该在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
仅仅因为为标签赋予id属性，例如id="Anchor"并不意味着您可以像这样直接从javascript调用它： Anchor.addEventListener('click', myFunction, false);
实际上，您必须在绑定事件之前找到该元素。
document.getElementById('Anchor').addEventListener('click', myFunction, false);
解决方案4
-1 2014-08-12 20:41:33
锚点是一个ID。 id的第一个字符应为小写（id =“ anchor”）。 使用document.getElementById（），您可以使用其ID查询DOM元素。
var domElement = document.getElementById("anchor");
使用JQuery时，还可以使用以下代码通过其ID获取元素：
$("#anchor")
为不在锚点内的所有图像添加事件侦听器
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.