Question

这可能是一个非常愚蠢的问题，但我现在很绝望。我试图通过单击这样的锚点来执行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 for example here。

额外信息：

我已经使用相同的方法设置了其他事件，但不知何故，锚是唯一不起作用的。例如：

<script type="text/javascript">
    function aFunction() {
        AnElement.style.display = 'none';
    }
    window.addEventListener('load', aFunction, false);
</script>

当窗口加载完毕后，元素完全隐藏。

Answer 1

问题是您将脚本放在HEAD部分。脚本执行时Anchor不存在，因此您获得Anchor is not defined。

试试这个将脚本放在html定义之后的修改版本。

DEMO

<a href="#" id="Anchor">Click me</a>
<script>
    function myFunction() {
        alert('It was clicked');
    }
    Anchor.addEventListener('click', myFunction, false);
</script>

Answer 2

你应该在页面加载事件后添加你的绑定，并使用getElementById。

function myFunction() {
    alert('It was clicked');
}
window.onload = function () {
    document.getElementById('Anchor').addEventListener('click', myFunction, false);
}

Answer 3

仅仅因为您为代码指定了id="Anchor"这样的ID属性并不代表您可以直接从javascript调用它：Anchor.addEventListener('click', myFunction, false);

实际上，您必须在绑定事件之前找到该元素。

document.getElementById('Anchor').addEventListener('click', myFunction, false);

Answer 4

Anchor是一个id。 id的第一个字符应该是小写字母（id =“anchor”）。使用document.getElementById（），您可以使用它的id来查询DOM元素。

var domElement = document.getElementById("anchor");

当您使用JQuery时，您还可以使用以下内容通过它的id获取元素：

$("#anchor")

事件监听器不在锚点上工作

4 个答案: