Javascript 如何在按钮内使用选择按钮？

我试图弄清楚如何在按钮内放置一个select，这样我就可以使用select来选择内容，但是select外的按钮会在单击时执行其他操作

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

如果单击“选择”，则立即触发按钮onclick

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

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

按钮
星期一
星期二
星期三

您可以使用span标记并将其样式设置为按钮。 这样，您就可以保持代码干净、有效，并且仍然可以实现您的目标

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

按钮
星期一
星期二
星期三

我的第一个解决方案无法跨浏览器工作，因为HTML5不允许在按钮中使用交互式元素（如

选择

）

正如Jason van der Zeeuw建议的那样，此新解决方案将按钮替换为跨距：

$（'span'）。单击（函数（事件）{
如果（event.target.tagName=='SPAN'）{
警报（'span按下！'）；
}
});

按钮
星期一
星期二
星期三
一个简单的解决方案：

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


按钮
星期一
星期二
星期三
函数doStuff（事件）{
如果（event.target.nodeName==='按钮'）{
//做事
}
}
根据，按钮元素不能具有交互式子体：

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

由于select是一个html，因此将select放在按钮内是无效的html

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


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

当然，您可以为父元素使用另一种结构。
将按钮更改为span不会更改任何内容。单击“选择”时，span上的Onclick事件也将触发。请尝试其他选择器：$（'.button'）。而不是（'select'）。单击（function（）{}）这样，click事件将不会绑定到select，但单击“选择”也会触发按钮单击事件？正确，它会触发按钮单击，但是如果单击选择框，
event.target.tagName
将是
SELECT
，因此只有当它等于
按钮时才能运行代码。即使单击选择按钮，也会触发警报。您使用的浏览器是什么？我还结合了Jason van der Zeeuw的回答尝试了它。如果我只是用跨距替换按钮，您的原始解决方案就可以工作。我认为这是做这件事最优雅的方式。我的答案可能不适用于所有浏览器。