event.preventDefault()
Опишу вопрос на условном (чисто условном) примере: у меня есть div с id="first" при клике на который стандартным действием браузера будет вывод слова "Привет" в alert. В этом div-е есть еще один div c id="second" при клике на который стандартным действием браузера будет вывод слова "Пока" в alert. Собственно вопрос, если у первого и второго элемента при событии click возникают стандартные действия браузера, то сработает ли стандартное действие браузера на div-e с id="first", если я нажму на вложенный div с id="second" и у этого div-a c id="second" одним из обработчиков click будет функция с кодом "event.preventDefault"? То есть event.preventDefault будет работать только на текущем элементе и отменять только для него действие браузера по умолчанию или он отменяет также все действия браузера по умолчанию события click для всех предков этого вложенного div-a с id="second" на который я нажал?
|
Цитата:
Цитата:
PS. Если речь о вложенных элементах, то запретить вывод сообщения в родительском при щелчке в дочернем, это event.stopPropagation() |
Я писал, что пример условный, так что alert("Привет") или alert("Пока") я условно назначил как стандартное действие браузера при возникновении события click на элементе div с id="first" и div с id="second" соответственно. Далее, вопрос был не про stopPropagation или stopImmediatePropagation и т.д., а про то, как работает event.preventDefault. Команда отменяет стандартное действие браузера для текущего элемента, на который мы нажали или отменяет также и все стандартные действия браузера события (onclick в моем случае) для всех его предков? Скорее всего отменяет только для текущего элемента, затем, если нет stopPropagation событие всплывает на предков и там тоже срабатывает событие (onclick в моем случае) и если уже на текущем элементе-потомке не будет стоять обработчик с event.preventDefault, то на нем стандартное действие браузера выполнится. Правильно ли я понимаю?
P.S. Ну если нужен другой пример, то чисто условно можно взять ссылку <a href="google.com"></a> в которой находится чекбокс (все это строго условно). Когда мы нажимаем на чекбокс, то в него ставится галочка... ну и потом идет суть вопроса, если в обработчиках чекбокса будет функция с event.preventDefault(), то галочка не поставится, а вот сработает ли переход по ссылке из предка с тегом "a" и перейдем ли мы на стартовую страницу google? |
Цитата:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script> <div id="a"> <a href="a">aaa</a> <div id="b"> <a href="b"><input type="checkbox" /></a> </div> </div> <a id="as" href="c"><input type="checkbox" /></a> <script> $('#a a').click(function(e) { alert(1) //и будет переход }); $('#b a').click(function(e) { e.preventDefault(); alert(2) //перехода не будет, отменено, будут выведены оба сообщения }) </script> $('#as').click(function(e) { e.preventDefault(); alert(3) //перехода не будет, отменено }) Ну или опять не понял "условностей" и в чем проблема. |
Такие вопросы не на форумах спрашивать надо, а проверять парой строчек кода на практике за минуту. Либо потратить десять на разбор спецификации.)
P.S. Ответ: да, отменяет любые стандартные действия, связанные с текущим типом события на любой стадии всплытия. |
Цитата:
Цитата:
|
Цитата:
Щелкните в примере по первому флажку, и ... ? Не путайте событие с каким либо стандартным действием браузера, во первых событие уже произошло, а во вторых не отменяется. Можно удалить установленный обработчик события, если это есть проблема. |
$('#b a').click(function(e) { alert(2); }) Так тоже перехода не будет) |
Цитата:
|
Попробуйте)
|
Часовой пояс GMT +3, время: 16:58. |