如何將點擊事件添加到元素？

我想在普通的JavaScript添加點擊事件（不使用jQuery），以這樣的元素，所以我沒有一個id而是一個類：如何將點擊事件添加到元素？

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

來源

2011-11-02 user603007

如果你沒有一個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的事件偵聽器的函數。

來源

2011-11-02 04:21:21 jfriend00

可以有幾種方法來做到這一點。

一個是你的權利錨

如添加單擊事件：<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/的實現之一。

來源

2011-11-02 04:22:30

像下面

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

來源

2011-11-02 04:26:23 AjayR

-1

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

來源

2011-11-02 04:26:33

在這裏，你簡單的使用是一些代碼，可以幫助你。 –

如何將點擊事件添加到元素？

回答

相關問題