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

Question

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

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

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

不确定是否需要提及但我想使用sass在React中解决此问题。

Answer 1

使用?此方法可以停止将事件冒泡到父元素，从而阻止执行任何父事件处理程序。

event.stopPropagation();

Answer 2

试试这个：

function fun(msg) {
    alert(msg);
    event.stopPropagation();
}

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

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

Answer 3

使用

<div class="wrapper">
  <div id="row1">
    activitybar
  </div>
  <div id="row2">
    sidebar
  </div>
  <div id="row3">
    <div id="col1">
      content
      <pre>
TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST
      </pre>
    </div>
    <div id="col2">others</div>
  </div>
</div>

像这样：

HTML

event.target

的js

<div class="_div" data-div="1"><div class="_div" data-div="2"></div></div>