Как предотвратить запуск событий по всему дереву DOM указанного c родителя, используя jQuery - PullRequest
Новая
       63

Как предотвратить запуск событий по всему дереву DOM указанного c родителя, используя jQuery

0 голосов
/ 09 июля 2020

Я проверил этот вопрос / ответ, но он не совсем сработал для моей ситуации.

Как сделать так, чтобы событие щелчка запускалось ТОЛЬКО на родительском DIV, а не на дочерних?

У меня в основном больше, чем просто родительская и дочерняя структура. Можно сказать, что есть еще и элементы внуков. Мы можем включить go и предположить, что он может стать намного глубже. 

<div class="parent">
    <div class="child">
        <div class="grandchild">
        </div>
    </div>
</div>

У нас есть этот стиль, примененный ко всем <div>, который в основном просто говорит, что все элементы имеют одинаковый размер, что также упростить: 

div {
    width: 100%
    height: 100%;
}

Используя jQuery, мы установили «mousedown» для всех классов.

Правило здесь состоит в том, что дети не знают, что происходит с их предками ( родитель, дедушка, прадедушка, прадедушка ...) и не может запрашивать у них какую-либо информацию (например: вы <div>? Какой у вас класс или идентификатор? и c ...), и они не будут передал любую информацию сверху.

Есть ли способ использовать jQuery, чтобы разрешить «mousedown» для самого старого родителя и предотвратить все «mousedown» от его дочерних элементов, внуков и т. д. c ... ?

Это может быть что-то похожее на stopPropagation (), но в другом направлении.

1 Ответ

0 голосов
/ 09 июля 2020

Учтите следующее. 

$(function() {
  $("body").on("mousedown", ".parent", function(e) {
    if (e.target == this) {
      console.log("Parent");
      return true;
    } else {
      console.log("Not Parent");
      return false;
    }
  });
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="parent">PAR
  <div class="child">CHI
    <div class="grandchild">G1</div>
  </div>
</div>

Если щелкнуть элемент Child или Grandchild, mousedown игнорируется.

...