Заставить обработчик событий игнорировать детей - PullRequest
Новая
       39

Заставить обработчик событий игнорировать детей

0 голосов
/ 17 марта 2020

Предположим, у меня есть код, аналогичный приведенному ниже (это очень упрощенно, но относительно та же идея) 

<div>
    <div class="parent" ondragenter="enter()" ondragleave="leave()">
        <div class="child">
            Stuff
        </div>
    </div>
</div>

Я хочу иметь возможность перетаскивать другой div поверх родительского div и запускать события как для ondragenter, так и для ondragleave. Это работает, но есть проблема. Когда предмет перетаскивается в ребенка, события также запускаются. Остановка распространения не работает, потому что она просто создает «дыру» в том месте, где находится дочерний элемент, и проблема все еще существует.

Есть ли способ полностью игнорировать дочерний элемент? Таким образом, я мог перетащить предмет внутрь ребенка и из него, и никакие события не сгорели; они стреляют только тогда, когда предмет входит и покидает родителя?

Я застрял на этом более недели, поэтому любая помощь будет признательна.

Ответы [ 2 ]

1 голос
/ 17 марта 2020

Используйте делегирование события , где вы устанавливаете обработчик события только на самом внешнем родительском объекте и обрабатываете все события там. В обработчике вы проверяете event.target, чтобы увидеть, каким был исходный элемент события, и продолжаете работу только тогда, когда этот элемент является тем, который вам нужен.

Вот пример click события: 

document.querySelector(".parent").addEventListener("click", function(event){
  console.log("Either the parent or the child was clicked.");

  // Only react if the source of the event was the parent, not the child.
  if(event.target.classList.contains("parent")){
     alert("you clicked on the parent");
  }

});
<div>Click on both the parent and the child. Only the parent will perform the desired action.
    <div class="parent">
      I'm the parent
        <div class="child">
            I'm the child
        </div>
    </div>
</div>
0 голосов
/ 20 марта 2020

В конце концов, я смог решить свою проблему, полностью удалив событие onleave. Именно это и вызывало большинство проблем.

Итак, теперь на входе я просто проверяю, отличается ли currentTarget от ранее посещенного currentTarget. Если это так, отключите ранее посещенный индикатор currentTarget и активируйте новый индикатор currentTarget.

Это на самом деле сработало лучше, чем я ожидал, потому что индикатор остается, даже если вы покидаете карту, но не вошли в новая карта Таким образом, вы всегда можете отслеживать, где вы в последний раз вошли.

...