Форум

Артист · #1 (**permalink**) 26.11.2016, 22:52

Вот есть ссылка(обратите внимание, что текст у неё выделен жирным):

<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 ссылки, просто для проверки
}

Вот что выдаёт:

Цитата:

[object Object] [object MouseEvent] [object HTMLElement]

Цитата:

undefined undefined undefined

Цитата:

undefined undefined Принять

Цитата:

http://bla-bla.ru

Так вот, функция срабатывает на клик, но отправляет в неё идентификатор <b> а не <a>.
Как исправить?

laimas · #2 (**permalink**) 27.11.2016, 12:57

event.preventDefault() // Отмена перехода по ссылке
    alert(event.target.tagName) //щелчок по В
    alert(event.target.parentNode.tagName) //а А, это родитель

moonwwwind · #3 (**permalink**) 27.11.2016, 17:41

//можно передать указатель на элемент на событие которого повешен обработчик события
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);
}

Артист · #4 (**permalink**) 27.11.2016, 20:19

Спасибо ))

Сделал так:

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

laimas · #5 (**permalink**) 28.11.2016, 01:19

Артист,
попробуйте в <A><B>text</B></A> щелкнуть вне тега В.

Артист · #6 (**permalink**) 28.11.2016, 01:29

Это как? Если текст ссылки весь в теге, а щелкается только на тексте...

laimas · #7 (**permalink**) 28.11.2016, 02:16

А вот так. Если к примеру в ячейке таблицы, у которой есть внутренние отступы помещена картинка, то можно сделать щелчок по картинке, и по ячейке в области отступов.

У вас теги приписаны без отступов, то есть нет даже пробелов, которые бы принадлежали тегу А, как можно при этом сделать по нему щелчок?

Артист · #8 (**permalink**) 28.11.2016, 10:39

А, это я знаю.
Но у меня просто ссылки, на странице...

ksa · #9 (**permalink**) 28.11.2016, 11:21

Сообщение от Артист

Назначаю ей функцию при клике:

document.querySelector('#accept').addEventListener('click', {handleEvent: reply_guild})

...
Как исправить?

Как вариант...

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

Артист · #10 (**permalink**) 28.11.2016, 12:09

Я от такого способа отказался, потому, что мне ещё 2 или 1 параметр нужно передать ))
Но всё равно спасибо ))

Форум

Справочник

Discord чат

Курсы javascript