如何将click事件添加到元素？
[英]How to add click event to an element?
问题描述
我想在普通的JavaScript（不使用jQuery）中添加一个click事件到这样的元素，所以我没有id而是一个类：
<a href="http://example.com/share" class="MyClass">Yummy</a>
4 个解决方案
解决方案1
10 已采纳 2011-11-02 04:21:21
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. 
如果您没有id并且没有任何选择器库并且您希望它在旧版浏览器中工作，则需要更多工作。 If you can put an id on it, it's quite simple. 如果你可以在上面放一个id，那就很简单了。 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. 由于getElementsByClassName在旧版浏览器中并非普遍可用，因此在不存在时需要填充程序来实现它。 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: 如果您可以在链接上添加ID：
<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. 如果您要定期执行此操作，添加事件侦听器比使用onclick属性更具可扩展性，但如果您没有任何框架，则需要一个函数来添加处理旧版本的事件侦听器IE浏览器
解决方案2
3 2011-11-02 04:22:30
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> 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. 另一种方法是使用document.getElementsByTagName（'a'）你可以引用所有href作为数组然后你可以选择那个特定的href并添加click事件。
like: document.getElementsByTagName('a')[0].click = function(){ } 喜欢： document.getElementsByTagName('a')[0].click = function(){ }
here 0 is just symbolic if u know the exact place in array you can give that index. 这里0只是象征性的，如果你知道数组的确切位置，你可以给这个索引。
The third way can be you can write a custom. 第三种方式是你可以写一个自定义。 document.getElementsByClassName function in javascript and use it similiarly. 在javascript中使用document.getElementsByClassName函数并使用它。 You can find a number of implementations of getElementsByClassName by searching google. 您可以通过搜索谷歌找到许多getElementsByClassName的实现。
look at http://robertnyman.com/2005/11/07/the-ultimate-getelementsbyclassname/ one of the implementation. 看看http://robertnyman.com/2005/11/07/the-ultimate-getelementsbyclassname/其中一个实现。
解决方案3
0 2011-11-02 04:26:23
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>
解决方案4
-1 2011-11-02 04:26:33
<!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>`
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.