Question

我有这个HTML结构：

<button onclick="console.log('blih');">
    <div style="padding:20px; border: 1px solid black" onclick="console.log('blah');">Test</div>
    Test 2
 </button>

即使在“测试”区域内，单击此按钮时也始终仅触发按钮onclick。我怎样才能解雇div onclick？

我在Firefox上遇到问题，这在Chrome和Safari上运行良好。

JSFiddle：https://jsfiddle.net/ovr0w9w4/

Answer 1

这不会一直有效，因为it's not valid to have a <div> in a <button>。

你可以伪造一个按钮。

＆＃13;

.btn {
  border: 1px solid black; 
  border-radius: 2px;
  display:inline-block;
  padding: 0.2em;
  background-color: #dddddd;
}

.btn:active {
    background-color: #aaaaaa;
}

.btn > div {
  padding:20px; 
  border: 1px solid black;
}

＆＃13;

<div class="btn" onclick="console.log('blih');">
    <div onclick="console.log('blah');">Test</div>
    Test 2
 </div>

＆＃13;

Answer 2

您可以简单地使用Bootstrap并将btn课程添加到您的第一个<div>，而不是无效的HTML。

<div id="div1" class="btn btn-default">
  <div id="div2">
  </div>
</div>

参见示例：https://jsfiddle.net/ddan/co5sm0d6/

按钮内的onclick事件

2 个答案: