javascript - 如何触发底层图片的onClick？

Question

我有两张图像，一张叠在一张上面(使用绝对位置)。

只有底层图像定义了onClick事件，我想当我点击叠加图像时触发底层图像的onClick事件。

我发现对于多个 div 标签，我可以使用 stopImmediatePropagation 停止这些行为.

但是，默认情况下图像元素似乎不会传播事件。有什么方法可以使用普通的 javascript 或 React 打开这些行为吗？

+)我知道图像绝对定位是一种不好的做法。我正在创建一款棋盘游戏，您可以在主板图像之上访问一些特殊的地方。如有任何建议，我们将不胜感激。

<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;
}

Answer 1

由于前面的元素是单击事件将被触发的元素，因此您可以将事件处理程序放在该元素上。然后，在该事件处理程序中，您可以选择后面图像的 DOM 元素，并使用 JavaScript 触发其上的事件。

对于普通 JavaScript:

一种方法是在 DOM 元素上使用 .click() 方法。

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/类组件:

由于您似乎正在使用 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>;
     }
   }
}