0

Предположим, есть вот такая структура:

<ul class="menu">
<li><a href="#">пункт 1</a></li>
<li>
    <a href="#">пункт 2</a>
    <ul class="dropdown-list mainlist">
        <li>
            <a href="#">подпункт 1</a>
            <ul class="dropdown-list sublist">
                <li><a href="#">11</a></li>
                <li><a href="#">22</a></li>
            </ul>
        </li>
        <li>
            <a href="#">подпункт 2</a>
            <ul class="dropdown-list sublist">
                <li><a href="#">111</a></li>
                <li><a href="#">222</a></li>
                ...

Почему вот такой код отменяет переход по ссылке для <a> второго уровня (в .sublist )?

window.onload = function() {
  var levelOne = document.querySelectorAll('.mainlist li');
  for (var x = 0; x < levelOne.length; x++) {
    if (levelOne[x].childElementCount === 2) {  /* find all 'li' with submenu */
      levelOne[x].onclick = function(event) {
        event.preventDefault();   /* prevent goto url of <a> if there is sublist */
      }

А вот такой не отменяет? То бишь, работает только на первый уровень.

window.onload = function() {
  var levelOne = document.querySelectorAll('.mainlist li a');
  for (var x = 0; x < levelOne.length; x++) {
    if (levelOne[x].parentElement.childElementCount === 2) {    /* find all 'li' with submenu */
      levelOne[x].onclick = function(event) {
        event.preventDefault();   /* prevent goto url of <a> if there is sublist */
      }

Я понимаю свой код в первом случае (при .querySelectorAll('.mainlist li')) таким образом: обработчик click пропускает "погружение" и отслеживает "всплытие", поэтому после нажатия мышкой на a должен произойти переход по ссылке, а после этого событие всплывёт к li и там уже должен сработать preventDefault. Так что отмена перехода по ссылке, вроде как, вообще не должна происходить.

3 ответа 3

1

В первом случае ты затрагиваешь li, поэтому оно ловит событие и отменяет последующие, а так как "a" находится непосредственно внутри этого элемента, то до него это событие не доходит.

0

Потому что событие от вложенных уровней всплывает и обрабатывается на li.

Во втором случае ссылка не является родительским элементом для других ссылок.

1
  • выходит, что, пройдя первый уровень и увидев, что есть второй уровень, отмена события произойдёт не только на том элементе, где выла обнаружена вложеность, но и на его наследниках?
    – lexxl
    28 апр 2016 в 6:52
0

Тут получается как бы помимо всплытия ещё и "погружение". Простите за аналогию. У вас не получается провалится событием click через li к a, так как li перехватывает и отменяет событие.

Но это вам уже сказали и без меня

1
  • 1
    preventDefault не отменяет всплытие.
    – Qwertiy
    27 апр 2016 в 18:32

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.