右键单击Firefox，Bootstrap下拉消失

Question

我在twitter-bootstrap和firefox上遇到了一些问题。 我有一个按钮和一个带有输入文本的下拉菜单。如果我右键单击输入（例如右键单击+粘贴），Firefox将关闭下拉列表。那很无聊。

是否有任何解决方案可以防止这种行为？

谢谢！

Answer 1

作为即时的止损解决方法，您可以使用以下行中的内容来阻止单击事件在点击事件右键单击时传播

JS

$(document).on('click', function(e) {
  e.button === 2 && e.stopImmediatePropagation()
})

这需要在 jQuery 加载和 Bootstrap 加载之间进行。

Plunk

然而，这是一种相当直率的方法，如果可能的话，你可能会做一些更微妙的事情。

<小时/>

更新

以更有针对性的方式规避此问题的一种方法是禁用原始事件侦听器，并将其替换为首先检查右键单击的侦听器。

JS

// obtain a reference to the original handler
var _clearMenus = $._data(document, "events").click.filter(function (el) {
    return el.namespace === 'data-api.dropdown' && el.selector === undefined
  })[0].handler;

// disable the old listener
$(document)
  .off('click.data-api.dropdown', _clearMenus)
  .on('click.data-api.dropdown', function (e) {
    // call the handler only when not right-click
    e.button === 2 || _clearMenus()
  })

与前面的示例不同，此代码需要在 Bootstrap加载后运行。

Plunk

Answer 2

对于 Bootstrap 3 ，您必须将命名空间更新为bs.data-api.dropdown。

JS

// obtain a reference to the original handler
var _clearMenus = $._data(document, "events").click.filter(function (el) {
  return el.namespace === 'bs.data-api.dropdown' && el.selector === undefined
})[0].handler;

// disable the old listener
$(document)
  .off('click.data-api.dropdown', _clearMenus)
  .on('click.data-api.dropdown', function (e) {
    // call the handler only when not right-click
    e.button === 2 || _clearMenus()
  })

Plunk