我可以为标签a使用document.getElementById(someid).onclick吗？

Question

我正在尝试在点击时调用一个JavaScript函数。我写了像这样的东西

<script type="text/javascript">
    function readPage(){
        alert("Hello");
    }

    document.getElementById('read').onclick=readPage;
</script>

<a id="read" href="">read</a> 

我试图调用readPage函数，但它不起作用。如果我在标签内写入onclick，它就可以工作，但是以上面的方式编写它就不起作用。为什么？

- Vipul

Answer 1

你的做法没有问题，但是需要在正确的时间执行。如果在DOM加载前尝试访问它（比如运行getElementById()），就会出现问题。最简单的解决方法是在window.onload中运行代码，像这样：

window.onload = function () {
   document.getElementById("read").onclick=readPage;
};

- Bjarne Mogstad

Answer 2

即使空的href属性也可以工作（此时将使用页面的当前URL），但是您必须像已经提到的那样使用window.onload来附加点击处理程序，或者您必须将script块移动在a元素之后。

否则，getElementById无法找到该元素，因为它尚不存在于DOM树中。

<a id="read" href="">read</a> 

<script type="text/javascript">
    function readPage(){
        alert("Hello");
        return false;
    }

    document.getElementById('read').onclick=readPage;
</script>

如前所述，您可以使用例如return false;来使浏览器不跟随URL。即使您将URL更改为href="#"，也需要这样做，否则浏览器将滚动页面到顶部。

自行测试：http://jsfiddle.net/Nj4Dh/1/

---

了解更多关于传统事件注册模型的信息。

- Felix Kling

Answer 3

你应该拥有：

<script type="text/javascript">
    function readPage(){
        alert("Hello");
    }

    document.getElementById('read').onclick=readPage;
</script>

<a id="read" href="#">read</a> 

- Sarfraz

---

不行，它没生效。我已经在另一个js文件中编写了JavaScript函数。 - Vipul

@Vipul：请确保你在当前页面使用<script src="path"></script>标签将该文件包含进去。 - Sarfraz

Answer 4

有两种方法可以做到这一点（没有任何特定于浏览器的功能）。 其中之一是

<script type="text/javascript">

    function stopDefault(e) //cross browser function for stopping default actionw
    {
        if (e && e.preventDefault)
        {
            e.preventDefault();
        }
        else
        {
            window.event.returnValue = true;
        }
        return false;
    }

    function readPage(event){
        alert("Hello");

         return stopDefault(event);//prevent default action
    }



    window.onload = function(event){

         document.getElementById('read').onclick=readPage;


    }
</script>

<a id="read" href="#">read</a> 

或者：

<script type="text/javascript">
    function stopDefault(e)
    {
        if (e && e.preventDefault)
        {
            e.preventDefault();
        }
        else
        {
            window.event.returnValue = true;
        }
        return false;
    }

    function readPage(event){
        alert("Hello");

         return stopDefault(event);//prevent default action
    }

</script>
<a id="read" href="#" onclick="readPage(event)">read</a> 

我使用了stopDefault函数sd。你需要停止链接的默认操作，否则它会尝试访问href中的URL。

- TmEllis

---

@Felix Kling 抱歉，我把那一部分粘贴到了错误的位置，谢谢。已更新。 - TmEllis

好的 :) 我删掉了我的评论 ;) - Felix Kling

Answer 5

首先，您需要禁用锚点的默认方向协议（即不让 a 标签跳转到 href）

1. 在锚点上添加 href="#"。
2. 查看 event.preventDefault() 函数示例 here。

- Buhake Sindi