javascript - 如何在按钮内使用选择？

Question

我想弄清楚如何将选择放在按钮内，以便我可以使用选择来选择内容，但选择外的按钮会在单击时执行其他操作。

这整个白色区域都是按钮，可以在其中看到选择。我想将所有白色区域用作按钮，如果单击选择，选择将打开。

如果我点击选择，现在按钮 onclick 被触发。

我可以使用 jQuery 创建一些东西来检测是否单击了选择，否则是否触发了按钮单击？

<button type="button" onclick="doStuff()" class="btn-lg btn-menu col-xs-6">
    Button
    <select>
        <option value="mon">Monday</option>
        <option value="tue">Tuesday</option>
        <option value="wed">Wednesday</option>
    </select>
</button>

Answer 1

我的第一个解决方案不能跨浏览器工作，因为 HTML5 不允许在按钮中使用交互式元素(例如 select)。

正如 Jason van der Zeeuw 所建议的那样，这个新的解决方案用 span 替换了按钮:

$('span').click(function(event) {
   if(event.target.tagName === 'SPAN') {
       alert('span pressed!');
   }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<span>
  Button
   <select>
      <option value="mon">Monday</option>
      <option value="tue">Tuesday</option>
      <option value="wed">Wednesday</option>
   </select>
</span>