如何使用按钮内的选择？

Question

我试图找出如何在一个按钮内放置一个选择,以便我可以使用选择来选择东西,但选择之外的按钮会做其他东西onclick.

整个白色区域是按钮,可以在里面看到选择.我想将所有白色区域用作按钮,如果单击选择,则会打开选择.

如果我单击选择,则立即触发按钮onclick.

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

<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').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>

Answer 2

根据W3C HTML5规范,button元素不能具有交互式后代:

Content model:
Phrasing content, but there must be no interactive content descendant.

由于select是一个交互元素,因此将一个select放在一个按钮内是无效的html.

出于好奇,我尝试使用z-index属性来增加select的堆栈顺序.

JS Bin

Firefox遵循标准,并且不允许在select上进行交互.

当然,您可以为父元素使用其他结构.