24.02.2018, 13:41
|
Интересующийся
|
|
Регистрация: 09.02.2018
Сообщений: 27
|
|
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" на который я нажал?
Последний раз редактировалось BNB, 24.02.2018 в 13:49.
|
|
24.02.2018, 14:54
|
Профессор
|
|
Регистрация: 14.01.2015
Сообщений: 12,990
|
|
Сообщение от BNB
|
оторый стандартным действием браузера будет вывод слова "Привет" в alert.
|
Сообщение от BNB
|
То есть event.preventDefault будет работать только на текущем элементе и отменять только для него действие браузера по умолчанию
|
alert(message), это не действие браузера по умолчанию и event.preventDefault() его отменить не может.
PS. Если речь о вложенных элементах, то запретить вывод сообщения в родительском при щелчке в дочернем, это event.stopPropagation()
Последний раз редактировалось laimas, 24.02.2018 в 15:00.
|
|
24.02.2018, 16:53
|
Интересующийся
|
|
Регистрация: 09.02.2018
Сообщений: 27
|
|
Я писал, что пример условный, так что 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?
|
|
24.02.2018, 17:35
|
Профессор
|
|
Регистрация: 14.01.2015
Сообщений: 12,990
|
|
Сообщение от BNB
|
отменяет также и все стандартные действия браузера события (onclick в моем случае)
|
OnClick, это событие, а не стандартное действие браузера. Стандартным будет, например, отправление формы, переход по ссылке, которые и можно отменить посредством preventDefault. А а всплытие события это не запретит.
<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) //перехода не будет, отменено
})
Ну или опять не понял "условностей" и в чем проблема.
|
|
24.02.2018, 17:40
|
|
Тлен
|
|
Регистрация: 02.01.2010
Сообщений: 6,584
|
|
Такие вопросы не на форумах спрашивать надо, а проверять парой строчек кода на практике за минуту. Либо потратить десять на разбор спецификации.)
P.S. Ответ: да, отменяет любые стандартные действия, связанные с текущим типом события на любой стадии всплытия.
__________________
29375, 35
Последний раз редактировалось Aetae, 24.02.2018 в 17:44.
|
|
24.02.2018, 17:46
|
Интересующийся
|
|
Регистрация: 09.02.2018
Сообщений: 27
|
|
Цитата:
|
OnClick, это событие, а не стандартное действие браузера.
|
Мб Вы меня неправильно поняли)) Тогда так:
Цитата:
|
отменяет также и все стандартные действия браузера события onclick (в моем случае)
|
|
|
24.02.2018, 18:29
|
Профессор
|
|
Регистрация: 14.01.2015
Сообщений: 12,990
|
|
Сообщение от BNB
|
Мб Вы меня неправильно поняли)) Тогда так:
отменяет также и все стандартные действия браузера события onclick
|
Действительно сложно понять ваших тараканов. )
Щелкните в примере по первому флажку, и ... ? Не путайте событие с каким либо стандартным действием браузера, во первых событие уже произошло, а во вторых не отменяется. Можно удалить установленный обработчик события, если это есть проблема.
|
|
24.02.2018, 19:34
|
Интересующийся
|
|
Регистрация: 09.02.2018
Сообщений: 27
|
|
$('#b a').click(function(e) {
alert(2);
})
Так тоже перехода не будет)
|
|
24.02.2018, 19:38
|
Профессор
|
|
Регистрация: 14.01.2015
Сообщений: 12,990
|
|
Сообщение от BNB
|
Так тоже перехода не будет)
|
С чего это вдруг?
|
|
24.02.2018, 19:38
|
Интересующийся
|
|
Регистрация: 09.02.2018
Сообщений: 27
|
|
Попробуйте)
|
|
|
|