Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 24.02.2018, 13:41
BNB BNB вне форума
Интересующийся
Отправить личное сообщение для BNB Посмотреть профиль Найти все сообщения от BNB
 
Регистрация: 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.
Ответить с цитированием
  #2 (permalink)  
Старый 24.02.2018, 14:54
Профессор
Отправить личное сообщение для laimas Посмотреть профиль Найти все сообщения от laimas
 
Регистрация: 14.01.2015
Сообщений: 12,990

Сообщение от BNB
оторый стандартным действием браузера будет вывод слова "Привет" в alert.
Сообщение от BNB
То есть event.preventDefault будет работать только на текущем элементе и отменять только для него действие браузера по умолчанию
alert(message), это не действие браузера по умолчанию и event.preventDefault() его отменить не может.

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

Последний раз редактировалось laimas, 24.02.2018 в 15:00.
Ответить с цитированием
  #3 (permalink)  
Старый 24.02.2018, 16:53
BNB BNB вне форума
Интересующийся
Отправить личное сообщение для BNB Посмотреть профиль Найти все сообщения от BNB
 
Регистрация: 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?
Ответить с цитированием
  #4 (permalink)  
Старый 24.02.2018, 17:35
Профессор
Отправить личное сообщение для laimas Посмотреть профиль Найти все сообщения от laimas
 
Регистрация: 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) //перехода не будет, отменено
})


Ну или опять не понял "условностей" и в чем проблема.
Ответить с цитированием
  #5 (permalink)  
Старый 24.02.2018, 17:40
Аватар для Aetae
Тлен
Отправить личное сообщение для Aetae Посмотреть профиль Найти все сообщения от Aetae
 
Регистрация: 02.01.2010
Сообщений: 6,584

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

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

Последний раз редактировалось Aetae, 24.02.2018 в 17:44.
Ответить с цитированием
  #6 (permalink)  
Старый 24.02.2018, 17:46
BNB BNB вне форума
Интересующийся
Отправить личное сообщение для BNB Посмотреть профиль Найти все сообщения от BNB
 
Регистрация: 09.02.2018
Сообщений: 27

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

Цитата:
отменяет также и все стандартные действия браузера события onclick (в моем случае)
Ответить с цитированием
  #7 (permalink)  
Старый 24.02.2018, 18:29
Профессор
Отправить личное сообщение для laimas Посмотреть профиль Найти все сообщения от laimas
 
Регистрация: 14.01.2015
Сообщений: 12,990

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

Щелкните в примере по первому флажку, и ... ? Не путайте событие с каким либо стандартным действием браузера, во первых событие уже произошло, а во вторых не отменяется. Можно удалить установленный обработчик события, если это есть проблема.
Ответить с цитированием
  #8 (permalink)  
Старый 24.02.2018, 19:34
BNB BNB вне форума
Интересующийся
Отправить личное сообщение для BNB Посмотреть профиль Найти все сообщения от BNB
 
Регистрация: 09.02.2018
Сообщений: 27

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


Так тоже перехода не будет)
Ответить с цитированием
  #9 (permalink)  
Старый 24.02.2018, 19:38
Профессор
Отправить личное сообщение для laimas Посмотреть профиль Найти все сообщения от laimas
 
Регистрация: 14.01.2015
Сообщений: 12,990

Сообщение от BNB
Так тоже перехода не будет)
С чего это вдруг?
Ответить с цитированием
  #10 (permalink)  
Старый 24.02.2018, 19:38
BNB BNB вне форума
Интересующийся
Отправить личное сообщение для BNB Посмотреть профиль Найти все сообщения от BNB
 
Регистрация: 09.02.2018
Сообщений: 27

Попробуйте)
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
event.preventdefault() не работает KennyMorkovka Ваши сайты и скрипты 6 06.04.2017 16:55
Уточнения по event.preventDefault() Faab Общие вопросы Javascript 2 24.01.2015 16:05
Не работает event.preventDefault(); mnk Firefox/Mozilla 2 20.03.2013 14:09
event.preventDefault(); отменить событие qwweras Events/DOM/Window 1 12.09.2009 03:48
Jquery IE6 autocomplite hp5741 Internet Explorer 8 31.08.2009 17:55