如何使用按钮内的选择？

Question

我试图弄清楚如何在一个按钮内放置一个选择，这样我就可以使用select来选择东西，但是select之外的按钮会在其他东西上点击。

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

如果单击“选择”，则会立即触发按钮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 Specification，button元素不能包含交互式后代：

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

由于select是interactive element，因此在按钮内放置一个无效的html。

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

JS Bin

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

当然，您可以为父元素使用其他结构。

Answer 3

您可以使用span-tag并将其设置为按钮。 这样，您可以保持代码清洁有效，并且仍能实现目标。

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

Answer 4

一个简单的解决方案：

<button type="button" onclick="doStuff(event)" 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>

<script>
    function doStuff(event) {
        if(event.target.nodeName === 'BUTTON') {
             // do stuff
        }
    }
</script>