Постепенное улучшение якорных тегов, чтобы избежать onclick = "return false;" - PullRequest
0 голосов
/ 12 мая 2010

Ненавязчивый JS предполагает, что у нас нет атрибутов onclick в наших шаблонах HTML.

<a href="/controller/foo/1">View Foo 1</a>

Основным прогрессивным улучшением является преобразование этого тега привязки в XHR для извлечения фрагмента DOM. Итак, я пишу JS, чтобы добавить прослушиватель событий для "click", а затем сделать XHR для a.href.

Увы, браузер все еще хочет перейти к «/ controller / foo». Итак, я пишу JS для динамического внедрения a.onclick = "return false;". Все еще ненавязчиво (наверное), но теперь я плачу за дополнительный обработчик событий.

Чтобы избежать затрат на 2 прослушивателя событий, я мог бы вставить свой вызов функции в атрибут onclick

<a href="/controller/foo/1" onclick="myXHRFcn(); return false;">

Но это гродо по разным причинам.

Чтобы сделать его более интересным, у меня может быть 100 якорных тегов, которые я хочу улучшить. Лучшим шаблоном является одиночный прослушиватель на родительском узле, который полагается на всплытие событий. Это круто, но как мне закорачивать браузер от перехода к URL без этого на каждом узле привязки?

onclick="return false;"

Управление href не вариант. Он должен оставаться неизменным, поэтому параметры контекстного меню, которые нужно скопировать или открыть на новой странице, работают, как и ожидалось.

1 Ответ

1 голос
/ 12 мая 2010

event.stopPropagation() скорее всего то, что вы ищете (внутри обработчика событий, где вы проверяете event.target для всплывающего клика)

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...