如何仅触发可点击div中的内部可点击

Question

如何仅触发可点击div中的内部可点击div？

如果你点击内部的蓝色框,内部和外部的onclick事件都会被触发,但我只是想触发蓝色的事件？

.outer {
  width: 100px;
  height: 50px;
  cursor: pointer;
  background: green;
  }
  
.inner {
  width: 50px;
  height: 50px;
  cursor: pointer;
  background: blue;
}

<div class="outer" onclick="alert('Hello world from outside');" role="button" tabIndex="-1">
  <div class="inner" onclick="alert('Hello world form inside');" role="button" tabIndex="-1">
  </div>
</div>

不确定是否有必要提及但我想在使用sass的React中修复此问题.

Answer 1

使用event.stopPropagation(); 此方法可以停止将事件冒泡到父元素,从而阻止执行任何父事件处理程序.

 <div class="outer" onclick="alert('Hello world from outside');" role="button" tabIndex="-1">
  <div class="inner" onclick="alert('Hello world form inside');event.stopPropagation();" role="button" tabIndex="-1">
  </div>
</div>