Как вызвать onClick подложки? - PullRequest
Новая
       64

Как вызвать onClick подложки?

0 голосов
/ 20 сентября 2019

У меня есть два изображения, одно поверх другого (с использованием абсолютной позиции).

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

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

Однако кажется, что элементы изображения по умолчанию не распространяют события.Есть ли способы, которыми я могу включить это поведение простым javascript или реагировать?

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

<img className="map" src="map.jpg"></img>
<img className="mission" src="mission.jpg"
     style={{react.js part setting top and left}}></img>

.board {
  position: relative;
  height: auto;
  width: 100%;
  float: left;
}
.mission {
  position: absolute;
  height: 10%;
  width: auto;
}

Ответы [ 2 ]

2 голосов
/ 20 сентября 2019

Поскольку элемент, который находится впереди, является тем, на котором будет запускаться событие click, вы можете установить обработчик событий для этого элемента.Затем в этом обработчике событий вы можете выбрать элемент DOM изображения, который находится сзади, и использовать JavaScript для запуска события на нем.

Для Vanilla JavaScript:

Один из способов -использовать метод .click () для элемента DOM.

https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/click

let imageInBack = document.getElementById('image-in-back')
let imageInFront = document.getElementById('image-in-front')

imageInFront.addEventListener('click', (e)=>{
    e.stopPropagation() //for general purposes, this won't affect theater image
    imageInBack.click() //programatically cause the other image to be clicked.
})

Для компонента React JSX / Class:

Поскольку вы выглядите какиспользуя React, я предполагаю, что, возможно, есть лучший способ выполнить то, что вы пытаетесь сделать, не вызывая событие для другого элемента.Но что касается буквального запуска события щелчка, то есть один способ: 

class MyComponent extends React.Component {
  constructor(props) {
    super(props)
    this.imageInBack = React.CreateRef() //gets this variable ready to store a DOM element.  See the ref property in the JSX, where the DOM element actually gets assigned to this variable.
  }

  //the event handler will be assigned to the imageInFront, but it will trigger the DOM element of the image in back:

  handleClick(e) {
      this.imageInBack.click()
  }
  render() {
    return <div style={{position: 'relative'}}>
       <img 
            ref={(img)=> {this.imageInBack = img}}
            className="image-in-back"  
            style={{position: 'absolute', top: '0px', left: '0px'}}/>
       <img className="image-in-front" 
            style={{position: 'absolute', top: '0px', left: '0px'/>
     </div>;
     }
   }
}
0 голосов
/ 20 сентября 2019

Вы можете переназначить обработчик событий с заднего изображения на переднее изображение.Убедитесь также и отмените обработчик на заднем изображении: 

let imageInBack = document.getElementById('image-in-back')
let imageInFront = document.getElementById('image-in-front')

let events = getEventListeners(imageInBack)
if(events["click"]){
  events["click"].forEach((event) => {
    imageInFront.addListener('click', event["listener"]);
    imageInBack.removeListener('click', event["listener"]);
  }
}

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

...