Заставить элементы с более высоким z-индексом отключить щелчок нижних элементов - PullRequest
Новая
       7

Заставить элементы с более высоким z-индексом отключить щелчок нижних элементов

2 голосов
/ 19 марта 2011

У меня есть «слой», который я хочу сделать щелчком. Хитрость в том, что я хочу, чтобы элементы над слоями не выполняли это действие при нажатии.

Как я могу это сделать?

Спасибо!

Ответы [ 4 ]

5 голосов
/ 19 марта 2011

Проблема, с которой вы столкнулись, вызвана тем, как события распространяются через дерево DOM. Когда вы щелкаете элемент на странице, обработчик щелчков этого элемента получит возможность ответить на щелчок. Если обработчик не остановит распространение события, родительский элемент получит возможность обработать событие и т. Д., Пока не будет достигнут корневой элемент.

Такое поведение обычно кажется естественным, и каждый элемент, находящийся позади элемента, по которому щелкнули, получит шанс ответить на событие. Однако, когда вы используете абсолютное позиционирование, вы можете поместить элемент перед другим элементом, который не является его предком в дереве dom. В этот момент распространение события может сбить с толку. Событие click получает только предки элементов, по которым щелкнули, что означает, что элементы за ним не могут.

Я создал jsfiddle - http://jsfiddle.net/HUGNd/ - чтобы проиллюстрировать эту ситуацию.

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

4 голосов
/ 19 марта 2011

Вызвать event.stopPropagation () , чтобы предотвратить "пузырение". Или, как упоминалось выше, измените родительские отношения для элемента с абсолютным позиционированием.

1 голос
/ 19 марта 2011

Я немного сбит с толку, я думаю, что это произойдет естественным образом через браузер.Из того, что я понял, вы пытаетесь сделать что-то вроде этого: 

<html>
  <body>
    <div id="block" style="position:absolute; top:0; left:0; width:200px; height:200px; background-color:red;" onclick="alert('clicked');"></div>
    <div id="block" style="position:absolute; top:0; left:0; width:100px; height:100px; background-color:blue;"></div>
  </body>
</html>

[Не совсем ответ, но, учитывая, что я хотел опубликовать код, я не чувствовал, что комментарий был уместен]

0 голосов
/ 23 марта 2018

Вы можете уменьшить триггер события до нужной цели. 

        targetDiv.onclick = (e) => {
            if ((e.target) == targetDiv) {
              alert('correct target');
            }
        }
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Похожие темы

...