Keyup Evenlistener прекратить распространение - PullRequest
Новая
       42

Keyup Evenlistener прекратить распространение

0 голосов
/ 19 сентября 2018

У меня есть список с span и div внутри каждого li.Я прикрепил обработчик событий click к каждому элементу span, чтобы показать div.Внутри div у меня есть button, к которому я прикрепил обработчик событий, чтобы закрыть погружение.Короче это модал.

Работает именно так, как я хочу.Однако мне нужно сделать его доступным.И часть этого заключается в том, чтобы он работал для пользователей, использующих только клавиатуру.Когда обработчик события keyup запускается для закрытия модального режима, запускается обработчик события click, прикрепленный к span.

Я провел много исследований по распространению и различным фазам событий.но я все еще не могу заставить его работать правильно.Я попробовал все, что обсуждалось в этом и этом потоке, но ничего не работает.Я не могу заставить родительский обработчик событий не срабатывать при использовании события keyup.Он не срабатывает, когда я использую событие click, чтобы закрыть его.

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

Это мой код: 

<ul>
  <li>
    <span>Item Title</span>
    <div>
        <button class="close">x</button>
    </div>
  </li>

</ul>



var topicsLinks = document.querySelectorAll('ul > li > span');
[].forEach.call(topicsLinks, function(link){
    link.addEventListener('click', function(e){               
        //
    });
});


var topicClose = document.querySelectorAll('.close');
[].forEach.call(topicClose, function(button){
    button.addEventListener('click', function(e){        ;         
        //
    });  
    // Trigger on keyboard enter
    button.addEventListener('keyup', function(e){
        e.preventDefault();
        e.stopImmediatePropagation;
        if(e.keyCode === 13) {
            // 
        }        
    });      
});

Кстати: я бы хотел использовать ванильный JavaScript.

...