发表新帖
发表新帖

How to add click event to an element?

前端 未结
关注
4 682
不要未来只要你来
不要未来只要你来 2020-11-27 08:01

I would like to add a click event in plain JavaScript (without using jQuery) to an element like this, so I don\'t have an id but a class:
相关标签:
4条回答
  • 孤街浪徒
    2020-11-27 08:49

    There can be several ways of doing this.

    One is you add the click event right in the anchor

    as: <a href='' onclick='yourFunct()'> Yummy </a>

    The other way can be using document.getElementsByTagName('a') you can get reference to all the href's as array then you can chose that particular href and add click event to it.

    like: document.getElementsByTagName('a')[0].click = function(){ }

    here 0 is just symbolic if u know the exact place in array you can give that index.

    The third way can be you can write a custom. document.getElementsByClassName function in javascript and use it similiarly. You can find a number of implementations of getElementsByClassName by searching google.

    look at http://robertnyman.com/2005/11/07/the-ultimate-getelementsbyclassname/ one of the implementation.

    0 讨论(0)
  • 囚心锁ツ
    2020-11-27 08:49

    You simple use like below

    <a href="http://braza.com/share" class="MyClass" onclick='return somefunction()'>Yummy</a>

<script>

function somefunction()
{
 // do your stuff.
// return true, if you want to open the link, or false to cancel
return true;
}

</script>
    0 讨论(0)
  • 抹茶落季
    2020-11-27 08:58

    If you don't have an id and don't have any selector library and you want it to work in older browsers, then it takes a bit more work. If you can put an id on it, it's quite simple. If not, it takes more code:

    var links = document.getElementsByClassName("MyClass");
links[0].onclick = function() {
    // put your click handling code here
    // return(false) if you don't want default click behavior for the link
}

    Since getElementsByClassName is not universally available in older browsers, you would need a shim to implement it when not present. Or, you could get all the links in your document with:

    var links = document.getElementsByTagName("a");

    and then cycle through that list until you find the one you want (perhaps checking the class name).

    If you can put an ID on the link:

    <a href="http://braza.com/share" id="specialLink" class="MyClass" >Yummy</a>

    Then, it just takes this code:

    document.getElementById("specialLink").onclick = function() {
    // add code here
}

    If you're going to do this regularly, the adding an event listener is a little more extensible than using the onclick property, but if you don't have any framework, then you need a function for adding an event listener that handles older versions of IE.

    0 讨论(0)
  • 甜味超标
    2020-11-27 08:58 
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html>
<head>
<title>Untitled</title>
<style type="text/css">
td { border: 1px solid #ccc; }
.findMe { color: gold; }
.youFoundMe { color: green; }
</style>

<script type="text/javascript"><!--

var aryClassElements = new Array();

function doSomething() {
aryClassElements.length = 0;
getElementsByClassName( 'findMe', document.body );
for ( var i = 0; i < aryClassElements.length; i++ ) {
    aryClassElements[i].className = 'youFoundMe';
}
}

function getElementsByClassName( strClassName, obj ) {
if ( obj.className == strClassName ) {
    aryClassElements[aryClassElements.length] = obj;
}
for ( var i = 0; i < obj.childNodes.length; i++ )
    getElementsByClassName( strClassName, obj.childNodes[i] );
}

//--></script> 
</head>

<body onload="doSomething();">
<h1>Heading 1</h1>
<div>
This code is inside my div.
<span>This code is inside a span inside the div. <a href="#" class="findMe">Link inside   the span inside the div.</a></span>
<a href="#">Link inside the div.</a>
</div>
<p>
<h2 class="findMe">My Paragraph's Heading 2</h2>
<table>
    <tr>
        <td class="findMe">My first cell.</td>
        <td>My second cell. <a href="#" class="findMe">Link inside the cell inside the  row inside the table.</a></td>
    </tr>
</table>
</p>
</body>
</html>`
    0 讨论(0)
 看不清?
提交回复
热议问题