Блог

Главная - Вопросы по программированию - Как добавить событие щелчка к элементу?

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

#javascript #onclick #click #dom-events

#javascript #onclick #нажмите #dom-события

Вопрос:

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

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

Ответ №1:

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

 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.

Ответ №2:

Для этого может быть несколько способов.

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

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

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

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

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

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

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

Ответ №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>

Ответ №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>`
Метки: