Javascript-форум (https://javascript.ru/forum/)
-   Общие вопросы Javascript (https://javascript.ru/forum/misc/)
-   -   event.preventDefault() (https://javascript.ru/forum/misc/72758-event-preventdefault.html)

BNB 24.02.2018 13:41

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" на который я нажал?

laimas 24.02.2018 14:54

Цитата:

Сообщение от BNB
оторый стандартным действием браузера будет вывод слова "Привет" в alert.

Цитата:

Сообщение от BNB
То есть event.preventDefault будет работать только на текущем элементе и отменять только для него действие браузера по умолчанию

alert(message), это не действие браузера по умолчанию и event.preventDefault() его отменить не может.

PS. Если речь о вложенных элементах, то запретить вывод сообщения в родительском при щелчке в дочернем, это event.stopPropagation()

BNB 24.02.2018 16:53

Я писал, что пример условный, так что 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?

laimas 24.02.2018 17:35

Цитата:

Сообщение от 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) //перехода не будет, отменено
})


Ну или опять не понял "условностей" и в чем проблема.

Aetae 24.02.2018 17:40

Такие вопросы не на форумах спрашивать надо, а проверять парой строчек кода на практике за минуту. Либо потратить десять на разбор спецификации.)

P.S. Ответ: да, отменяет любые стандартные действия, связанные с текущим типом события на любой стадии всплытия.

BNB 24.02.2018 17:46

Цитата:

OnClick, это событие, а не стандартное действие браузера.
Мб Вы меня неправильно поняли)) Тогда так:

Цитата:

отменяет также и все стандартные действия браузера события onclick (в моем случае)

laimas 24.02.2018 18:29

Цитата:

Сообщение от BNB
Мб Вы меня неправильно поняли)) Тогда так:
отменяет также и все стандартные действия браузера события onclick

Действительно сложно понять ваших тараканов. )

Щелкните в примере по первому флажку, и ... ? Не путайте событие с каким либо стандартным действием браузера, во первых событие уже произошло, а во вторых не отменяется. Можно удалить установленный обработчик события, если это есть проблема.

BNB 24.02.2018 19:34

$('#b a').click(function(e) {
    alert(2);
})


Так тоже перехода не будет)

laimas 24.02.2018 19:38

Цитата:

Сообщение от BNB
Так тоже перехода не будет)

С чего это вдруг?

BNB 24.02.2018 19:38

Попробуйте)


Часовой пояс GMT +3, время: 16:58.