JavaScript-事件：如何觸發底層圖像的 onClick？

Question

我有兩個圖像，一個在另一個之上（使用絕對位置）。

只有底層圖像定義了 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;
}

Answer 1

由於前面的元素是觸發 click 事件的元素，因此您可以將事件處理程序放在該元素上。 然后，在該事件處理程序中，您可以 select 背面圖像的 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/ 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>;
     }
   }
}

Answer 2

您可以將事件處理程序從背面圖像重新分配給正面圖像。 確保並取消背面圖像上的處理程序：

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，那么可能有更好的方法來實現這一點。