Как добавить событие клика к элементу? - PullRequest
Новая
       21

Как добавить событие клика к элементу?

7 голосов
/ 02 ноября 2011

Я хотел бы добавить событие click в простом JavaScript (без использования jQuery) к такому элементу, поэтому у меня нет id, но есть класс: 

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

Ответы [ 4 ]

10 голосов
/ 02 ноября 2011

Если у вас нет идентификатора и у вас нет библиотеки селекторов, и вы хотите, чтобы она работала в старых браузерах, тогда это займет немного больше работы. Если вы можете поставить идентификатор на нем, это довольно просто. Если нет, требуется больше кода: 

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");

и затем перебирайте этот список, пока не найдете нужный (возможно, проверяя имя класса).

Если вы можете поставить идентификатор на ссылку: 

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

Тогда он просто принимает этот код: 

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

Если вы собираетесь делать это регулярно, добавление прослушивателя событий немного более расширяемо, чем использование свойства onclick, но если у вас нет какой-либо инфраструктуры, вам понадобится функция для добавления прослушивателя событий, которая обрабатывает более старые версии IE.

3 голосов
/ 02 ноября 2011

Там может быть несколько способов сделать это.

Во-первых, вы добавляете событие щелчка прямо в якорь

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

Другим способом может быть использование document.getElementsByTagName ('a'), вы можете получить ссылку на все href в виде массива, затем вы можете выбрать этот конкретный href и добавить к нему событие click.

нравится: document.getElementsByTagName('a')[0].click = function(){ }

здесь 0 просто символично, если вы знаете точное место в массиве, вы можете дать этот индекс.

Третий способ - написать кастом. document.getElementsByClassName функция в javascript и использовать ее аналогично. Вы можете найти ряд реализаций getElementsByClassName, выполнив поиск в Google.

посмотрите на http://robertnyman.com/2005/11/07/the-ultimate-getelementsbyclassname/ одну из реализаций.

0 голосов
/ 02 ноября 2011 
<!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 голосов
/ 02 ноября 2011

Вы просто используете, как показано ниже 

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