Javascript 我可以使用 document.getElementById(someid).onclick 来标记 a

can I use document.getElementById(someid).onclick for tag a

提问by Vipul

I am trying to call a javascript function onclick. I have written something like this

我正在尝试调用一个 javascript 函数 onclick。我写过这样的东西

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

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

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

I am trying to call readPage function but its not working?if I write onclick inside tag it works but the way I have written above is not working. why?

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

回答by Bjarne Mogstad

There is nothing wrong about how you do it, but when. You can not access the DOM (like running getElementById())before it has loaded. The easiest thing to do is to run you code inside window.onloadlike this:

你怎么做没有错，但什么时候做。您无法在 DOM(like running getElementById())加载之前访问它。最简单的方法是window.onload像这样在里面运行你的代码：

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

回答by Felix Kling

It will work with an empty hrefattribute (then the current URL of the page will be used), but you have to use, as already mentioned, window.onloadto attach the click handler, or you have to move the scriptblock afterthe aelement.

它将使用空href属性（然后将使用页面的当前 URL），但是您必须使用，如前所述， window.onload附加点击处理程序，或者您必须在元素之后移动script块。a

Otherwise getElementByIdcannot find the element because it does not yet exist in the DOM tree.

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

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

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

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

? As already mentioned, you use e.g. return false;to make the browser notfollow the URL. You even need this if you change the URL to href="#"because otherwise the browser will scroll the page to the top.

? 如前所述，您使用 egreturn false;使浏览器不跟随 URL。如果您将 URL 更改为 ，您甚至需要这样做，href="#"否则浏览器会将页面滚动到顶部。

Test it yourself: http://jsfiddle.net/Nj4Dh/1/

自己测试一下：http: //jsfiddle.net/Nj4Dh/1/

---

---

Read more about the traditional event registration model.

阅读有关传统事件注册模型的更多信息。

回答by Felix Kling

There are two ways to do it really (Without any browser specific functions). One is

有两种方法可以真正做到这一点（没有任何浏览器特定的功能）。一个是

<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> 

Or:

或者：

<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> 

I've used the stopDefault function sd You need to stop the default action of a link, otherwise it will try to go to the url thats in the href.

我使用了 stopDefault 函数 sd 您需要停止链接的默认操作，否则它将尝试转到 href 中的 url。

回答by Buhake Sindi

You would first have to disable anchor's default direction protocol (i.e., not let a go to href)

您首先必须禁用锚点的默认方向协议（即，不要去href）

1. Make href="#"on anchor.
2. Check the event.preventDefault()function example here.

1. 做href="#"锚。
2. 检查event.preventDefault()功能示例here。

回答by Sarfraz

You should have:

你应该有：

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

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

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