Bootstrap3下拉菜单如何通过mousedown事件触发？求简便实现方案

1. 修正按钮属性错误 #

原按钮的type属性写法错误（将样式类混入了type属性），先修正按钮代码：

<button type="button" class="btn btn-default btn-secondary dropdown-toggle" data-toggle="dropdown"
        aria-haspopup="true" aria-expanded="false">*Menu Name*<span class="caret"></span>
</button>
<ul class="dropdown-menu">
    <li><a href="#">Do Something</a></li>
    <li><a href="#">Do The Other Thing</a></li>
</ul>

2. 添加自定义JS绑定mousedown触发 #

Bootstrap3的下拉组件默认绑定click（mouseup阶段）事件，我们可以调用组件内置的toggle方法，在mousedown事件触发时展开下拉菜单，无需升级Bootstrap：

基础版本（无Turbolinks）

在页面底部或单独的JS文件中添加：

$('.dropdown-toggle').on('mousedown', function(e) {
  e.stopPropagation();
  $(this).dropdown('toggle');
});

Rails Turbolinks适配版本

如果你的应用使用Turbolinks，需要在页面加载完成后绑定事件，避免Turbolinks刷新后事件失效：

document.addEventListener('turbolinks:load', function() {
  $('.dropdown-toggle').off('mousedown').on('mousedown', function(e) {
    e.stopPropagation();
    $(this).dropdown('toggle');
  });
});

3. 可选：禁用默认click触发（按需选择） #

如果希望仅保留mousedown触发逻辑，移除默认的click绑定：

$('.dropdown-toggle').off('click.bs.dropdown');

说明 #

这种方案仅通过少量自定义JS扩展Bootstrap3下拉组件的触发逻辑，不会改动原有组件核心代码，也无需升级Bootstrap版本，能有效避免升级带来的兼容性问题。

内容的提问来源于stack exchange，提问作者Eric