По умолчанию поведение (href) унаследовано его дочерними элементами ?

Демо на jsfiddle.net

HTML:

<a href="http://www.jsfiddle.net" target="_blank"><span>link</span></a>

Автор сценария:

$('span').click(function(event) {
 window.open('http://www.google.com');
 event.stopImmediatePropagation();
 //The line below does prevent jsfiddle.net from loading on the right.
 //event.preventDefault();
});
$('a').click(function() {
 //This function is not triggered as event propagation has been stopped.
 alert('You will never see this.');
});

Нажатие "ссылки" в демо приведет к открытию google.com и jsfiddle.net. Вот мой вопрос: почему поведение по умолчанию (открытие jsfiddle.net в этом случае), унаследованное его дочерними элементами ( в этом случае)? Существуют ли какие-либо спецификации, на которые я могу ссылаться? Заранее спасибо.

2 ответа

Почему поведение унаследовано элементами по умолчанию?

Потому что это имеет смысл :-) Каждый клик по ссылке или ее потомкам вызывает событие, действие по умолчанию которого заключается в активации ссылки.

Существуют ли какие-либо спецификации, на которые я могу ссылаться?

Проверьте действия по умолчанию и отменяемые события в спецификации DOM уровня 3 для объяснения отмены. Однако DOM3 не определяет никаких действий по умолчанию самостоятельно.

Это делается в спецификации HTML 5, для кликов в разделе " Интерактивный контент":

При нажатии на указывающее устройство пользовательский агент должен выполнить следующие действия:

<ol> <li> [Установить несколько флагов]</li> <li> Пусть <code>e</code> - <a href="http://www.whatwg.org/specs/web-apps/current-work/multipage/elements.html#nearest-activatable-element%23nearest-activatable-element" rel="nofollow noreferrer" target="_blank">ближайший активируемый элемент</a> элемента, обозначенный пользователем, если таковой имеется. Чтобы получить это, проверьте, имеет ли цель определенное поведение активации. Если это так, возьмите его, если он не имеет (и имеет родительский элемент), затем <span>повторите проверку с родительским элементом цели</span>.</li> <li> Если есть элемент <code>e</code>, запустите для него шаги активации предварительного щелчка, если они есть.</li> <li> Отправляйте требуемое событие <code>click</code>.</li> <li> Если есть элемент <code>e</code> и событие click не отменяется, запустите для него шаги активации щелчка, если они есть.</li> <li> Если есть элемент <code>e</code> и событие отменено, запустите для него отмененные шаги активации, если они есть.</li> <li> [Сбросить флаги]</li> </ol>

Поведение активации определяется самими элементами, например, в элементе чтобы получить и следовать гиперссылке.


Пожалуйста, посмотрите на этот ответ здесь:

делает e.stopPropagation() в jquery работает на теге привязки

Вы можете комбинировать с event.preventDefault(); чтобы получить желаемое поведение. StopPropagation предотвращает запуск событий, но не поведение по умолчанию, поэтому перейдите на страницу при нажатии тега .

licensed under cc by-sa 3.0 with attribution.