addEventListener срабатывает на вложенный объект.
Вот есть ссылка(обратите внимание, что текст у неё выделен жирным):
<a id="accept" href="http://bla-bla.ru"><b>Принять</b></a> Назначаю ей функцию при клике:
document.querySelector('#accept').addEventListener('click', {handleEvent: reply_guild})
Это сама функция:
function reply_guild(event)
{
event.preventDefault() // Отмена перехода по ссылке
alert(this + ' ' + event + ' ' + event.target) // Вывести ид объекта
alert(this.href + ' ' + event.href + ' ' + event.target.href) // Вывести href объекта
alert(this.innerHTML + ' ' + event.innerHTML + ' ' + event.target.innerHTML) // Вывести текст объекта
alert(document.querySelector('#accept')) // Вывести href ссылки, просто для проверки
}
Вот что выдаёт: Цитата:
Цитата:
Цитата:
Цитата:
Так вот, функция срабатывает на клик, но отправляет в неё идентификатор <b> а не <a>. Как исправить? |
event.preventDefault() // Отмена перехода по ссылке
alert(event.target.tagName) //щелчок по В
alert(event.target.parentNode.tagName) //а А, это родитель
|
//можно передать указатель на элемент на событие которого повешен обработчик события
var el = document.getElementById('accept'); el.addEventListener('click', function(event) {reply_guild(event, el);}); function reply_guild(event, e) { event.preventDefault(); alert('e.id - ' + e.id); alert('e.href - ' + e.href); alert('event.target.tagName - ' + event.target.tagName); } |
Спасибо ))
Сделал так:
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<script type="text/javascript">
function reply_guild(e)
{
event.preventDefault() // Отмена перехода по ссылке
var ref = e.target.href
if(!ref) ref = e.target.parentNode.href
alert(ref)
}
function main()
{
document.querySelector('#accept').addEventListener('click', {handleEvent: reply_guild})
document.querySelector('#skip').addEventListener('click', {handleEvent: reply_guild})
}
document.addEventListener('DOMContentLoaded', main)
</script>
</head>
<body>
<center>
<a id="accept" href="/bla-bla.php?action=accept"><b>Принять</b></a>
<br>
<a id="skip" href="/bla-bla.php?action=skip">Отказаться</a>
</center>
</body>
</html>
|
Артист,
попробуйте в <A><B>text</B></A> щелкнуть вне тега В. |
Это как? Если текст ссылки весь в теге, а щелкается только на тексте...
|
А вот так. Если к примеру в ячейке таблицы, у которой есть внутренние отступы помещена картинка, то можно сделать щелчок по картинке, и по ячейке в области отступов.
У вас теги приписаны без отступов, то есть нет даже пробелов, которые бы принадлежали тегу А, как можно при этом сделать по нему щелчок? |
А, это я знаю.
Но у меня просто ссылки, на странице... |
Цитата:
<a id="accept" href="http://bla-bla.ru"><b>Принять</b></a>
<script type='text/javascript'>
document.querySelector('#accept').addEventListener(
'click',
reply_guild,
false
);
function reply_guild(event) {
event.preventDefault() // Отмена перехода по ссылке
alert(this.tagName);
alert(this + ' ' + event + ' ' + event.target) // Вывести ид объекта
alert(this.href + ' ' + event.href + ' ' + event.target.href) // Вывести href объекта
alert(this.innerHTML + ' ' + event.innerHTML + ' ' + event.target.innerHTML) // Вывести текст объекта
alert(document.querySelector('#accept')) // Вывести href ссылки, просто для проверки
};
</script>
|
Я от такого способа отказался, потому, что мне ещё 2 или 1 параметр нужно передать ))
Но всё равно спасибо )) |
| Часовой пояс GMT +3, время: 18:31. |