Блог

Главная - Вопросы по программированию - Распространение события onClick в перекрывающихся элементах

Распространение события onClick в перекрывающихся элементах

#javascript #html #reactjs #typescript

#javascript #HTML #reactjs #typescript

Вопрос:

У меня есть два абсолютно расположенных div s, которые перекрываются, каждый с onClick обработчиком. Мне нужно onClick , чтобы обработчик запускался для каждого элемента, но это происходит только для того, что находится сверху. Я использую React 17.

Пример кода:

 <div style={{ position: "absolute" }}>
  <div
    style={{
      position: "absolute",
      left: 0,
      top: 0,
      height: 100,
      width: 100,
      backgroundColor: "rgba(0, 200, 200, 0.2)",
    }}
    onClick={() => console.log("first")}
  />
  <div
    style={{
      position: "absolute",
      left: 50,
      top: 50,
      height: 100,
      width: 100,
      backgroundColor: "rgba(200, 200, 0, 0.2)",
    }}
    onClick={() => console.log("second")}
  />
</div>

Визуализация:

визуализация

Щелчок либо по журналам неперекрывающейся 'first' части, либо 'second' по консоли, но щелчок по перекрывающейся части регистрирует только журналы 'second' .

Как событие может быть распространено и на элемент позади?

(Это почти наверняка дубликат, но после тонны поиска я не нашел никаких похожих вопросов.)

Комментарии:

1. вы хотите, чтобы onclick работал с перекрывающейся частью или со всей частью?

2. @MohammadFaisal я хочу, чтобы оба обработчика запускали только перекрывающуюся часть

3. как это может быть возможно, учитывая, что холст нашего браузера является 2-мерным?

4. извините, но я не понимаю вопроса: браузер знает, что оба этих элемента отображаются в соответствии с координатами, по которым выполняется щелчок. вот как он знает, как смешивать цвета фона.

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

Ответ №1:

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

Я увеличил значение z-index; целевой цели до высокого значения, чтобы она находилась сверху и получала щелчок. Это оказалось проблемой только потому, что я использую прозрачные элементы.