html - 将图像放入具有自定义样式的 div 时无法单击图像

Question

我有三种样式，前两种用于 div，最后一种用于图像。可以在没有 div 的情况下单击图像。但我需要 div 效果，我该如何解决这个问题。现在图像不响应 onClick。

const onclick=(e)=>{
    e.stopPropagation();
    console.log('clicked')
}

.start-screen {
  position: absolute;
  top: 0;
  margin-top: 2.3%;
  height: 65vh;
  width: 91vw;
  background: -webkit-linear-gradient(
    top,
    #0a0a0a 0,
    rgba(10, 10, 10, 0.58) 58%
  );
  display: flex;
  justify-content: center;
  align-items: center;
}

#start {
  transition-duration: 2s;
  pointer-events: none;
}
.schema{
    position: absolute;
    top: 5%;
    left: 35%;
    display: block;
    pointer-events: auto;
    transition-duration: 2s;
}

<div class="start-screen" id="start">
  <img class="transport" src='imgs/transportDiagram.png'  alt='fail to load services' onClick="onclick">
</div>

Answer 1

您应该在 div 中添加点击事件。

<div className="start-screen" id="start" onClick={onclick}>
        <img className="transport" src='imgs/transportDiagram.png'  alt='fail to load services'  />
</div>

Answer 2

我犯了一个错误，没有使用正确的类名。将 className='transport' 更改为 'schema' 会起作用。

Answer 3

希望这会奏效

    <div className="start-screen" id="start">
        <img className="transport" src='imgs/transportDiagram.png'  alt='fail to load services' onClick={() => onclick()} />
    </div>