Почему при задавании атрибуты переходит сразу же по ссылке?

Question

[Ingernirated]

Почему при установке атрибута сразу же происходит и переход по ссылке, а не при повторном нажатии?
<a class="a">page</a>

var a = document.querySelector(".a");
function change() {
a.innerHTML = "www.w3s.com";
a.setAttribute("href", "www.w3s.com");
}
a.addEventListener("click", change)

Answer 1

[Виктор Янышев]

Потому что не отменено стандартное поведение

Answer 2

[Antowa Kartowa]

Потому что клик по ссылке по умолчанию обрабатывается браузером как инструкция для перехода по ссылке. Что вроде бы очевидно) Для отмены действий по умолчанию традиционно ипсользуется конструкция event.preventDefault(); где event объект события. Обработчик события ( в данном случае change ) получает его первым аргументом: function change(event) {...} И возможно стоит сделать фоллбек для старых версий эксплорера event = event || window.event который объект события не передает и значение его можно получить из глобального объекта.

Очевидно событие по умолчанию отрабатывает в конце - после того как все пользовательские обработчики события закончили свое выполнение. Иначе как бы event.preventDefault() мог остановить событие после его выполнения. А значит на момент выполнения действия по умолчанию функция change уже установила аттрибут href. Вроде так

Comments

[Ingernirated]

Но ведь если в ней нет ссылки, оно ничего не делает, а нажатием мы только задали атрибуты, как там нарисовалось после назначения событие для перехода?

[Antowa Kartowa]

Ingernirated: Не думаю, что отсутствие адреса у ссылки отменяет действие браузера по умолчанию. Просто при отсутствии адреса или якоря обработчик по умолчанию ничего не сделает. Но он будет вызван.

А теперь приблизительная последовательность.
1. Ты кликнул.
2. Браузер проверили есть ли пользовательские обработчики события и сформировал очередь обработчиков события клик на этой ссылке. Последний в очереди обработчик события по умолчанию.
3. Первым выполняется твой обработчик который меняет несколько значений объекта элемента ссылки. Скорее всего после этого бразуер установит в конец очереди операцию перерисовки ДОМ-узла
4. Выполняется обработчик по умолчанию. Который проверяет значение href объекта. Оно не пусто - как раз перед этим твой обработчик сделал его равным "www.w3s.com". Следовательно инициируется переход.
5. Ну еще наверное успевает отработать перерисовка ДОМ-узла ссылки.

Answer 3

[Dark Hole]

Браузер: О, этот унылый мудак нажал на кнопку.
Браузер: Сгенерирую я-ка событие.
Ты: Обрабатываешь событие
Браузер: О, он не вызвал Event.preventDevaults
Браузер: Так-с, что там у нас по умолчанию? Переход по ссылке? Дай две.

Answer 4

[Omny]

Думаю так будет понятнее:

var a = document.querySelector(".a");
function change(e) {
	e.preventDefault()
	a.innerHTML = "www.w3s.com";
	a.setAttribute("href", "www.w3s.com");
	a.removeEventListener("click", change);
}
a.addEventListener("click", change)

Comments

[Ingernirated]

но повторно нажав по этому тегу мы уже не перейдём по ссылке?

[Omny]

Напротив, строчка
a.removeEventListener("click", change);
отменяет привязку к событию. Следующий клик отработает со стандартными настройками.