Question

我想在纯JavaScript（不使用jQuery）中添加一个click事件到这样的元素，所以我没有id而是一个类：

<a href="http://example.com/share" class="MyClass">Yummy</a>

Answer 1

如果您没有ID并且没有任何选择器库，并且您希望它在旧版浏览器中工作，则需要更多工作。如果你可以在上面放一个id，那就很简单了。如果没有，则需要更多代码：

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
}

由于getElementsByClassName在旧版浏览器中并非普遍可用，因此在不存在时需要使用填充程序来实现它。或者，您可以通过以下方式获取文档中的所有链接：

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

然后循环浏览该列表，直到找到所需的那个（也许检查类名）。

如果您可以在链接上添加ID：

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

然后，它只需要这段代码：

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

如果您要定期执行此操作，添加事件侦听器比使用onclick属性更具可扩展性，但如果您没有任何框架，则需要一个用于添加事件侦听器的函数处理旧版本的IE。

Answer 2

有几种方法可以做到这一点。

一个是你在锚

中添加点击事件

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

另一种方法是使用document.getElementsByTagName（'a'）你可以引用所有href作为数组然后你可以选择那个特定的href并添加click事件。

喜欢：document.getElementsByTagName('a')[0].click = function(){ }

如果您知道数组中确切的位置，那么0就是符号。

第三种方式可以是你可以写一个自定义。在javascript中使用document.getElementsByClassName函数并使用它。您可以通过搜索谷歌找到一些getElementsByClassName的实现。

查看http://robertnyman.com/2005/11/07/the-ultimate-getelementsbyclassname/其中一个实现。

Answer 3

您可以像下面这样简单使用

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

Answer 4

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

如何将click事件添加到元素？

4 个答案: