javascript - MDL菜单点击鼠标右键打开bug

Question

我制作这个 fiddle 是为了使调试更容易 -> https://jsfiddle.net/ayo8voh2/

JS:

jQuery('.edit-view-submenu').mousedown(function(event) {
    if (event.which === 3) { // right mouse clicked
    // disable default menu
    jQuery(this).bind('contextmenu', function() {
      return false;
    });

    jQuery(this).find('.mdl-button').trigger('click');
  }
});

HTML:

            <div class="edit-view-submenu">
                <button id="edit-context"
                        class="mdl-button mdl-js-button mdl-button--icon float-right">
                    <i class="material-icons">more_vert</i>
                </button>

                <ul class="mdl-menu mdl-menu--bottom-left mdl-js-menu mdl-js-ripple-effect"
                    for="edit-context">
                    <li class="mdl-menu__item">Show</li>
                    <li class="mdl-menu__item">Show 2</li>
                    <li class="mdl-menu__item">Show 3</li>
                    <li class="mdl-menu__item">Show 4</li>
                </ul>
            </div>

我想做的是，当用户用鼠标右键单击菜单按钮时，禁用默认浏览器上下文菜单并触发默认的鼠标左键单击(以便打开 mdl 上下文菜单)。

要重新创建问题:

1) 首先在 Chrome 中打开 fiddle，然后用鼠标右键单击菜单图标(3 个点) - 注意它如何很好地打开菜单； 2)现在在 Firefox 中打开相同的 fiddle 并执行相同的操作 - 注意菜单如何打开并立即关闭； (如果您单击并按住鼠标右键，它将保持打开状态。此外，如果您单击鼠标右键，然后将光标移动到打开的菜单，它也将保持打开状态)

我找不到解决这个问题的方法，因为这个错误(？)对我来说看起来真的很奇怪。也许 Firefox 有一些你们知道而我不知道的东西？

可以通过定位菜单来克服这个问题，这样当它打开时，它会在鼠标光标所在的位置打开 - 然后它不会消失，但这不是一个正常的修复，而更像是一个“丑陋的修补程序” .

感谢您对此进行调查并进行良好的调试(如果需要的话)。

Answer 1

我意识到这个问题现在确实处于休眠状态，我在 Firefox 中尝试过，这个问题似乎不再发生，但我相信我已经找到了原因，因此找到了答案。

TL;DR - 在您正在创建的新菜单上检测到另一次右键单击。

对于上下文:我的情况略有不同，因为我希望当用户右键单击 Canvas 类型区域时在鼠标位置弹出窗口。我创建了右键单击菜单，一切工作正常，直到我将菜单与鼠标的实际位置对齐 - 然后我也会得到默认的上下文菜单(与您所描述的问题相同)。所以澄清一下 - 当菜单位于屏幕左上角时代码可以工作 - 当菜单位于鼠标位置时代码不起作用 我的情况给了我提示 - 当菜单出现在光标下方时就会出现问题 - 那么这里发生了什么。我向所有 div 添加了一堆额外的监听器，发现除了空间上的初始 mousedown 事件外，新显示的菜单上还触发了一个“mouseup” - 我猜想，鉴于相应的 mousedown 只有几毫秒早些时候，我的浏览器(在我的情况下是 Chrome 浏览器很奇怪)通过右键单击该元素将其拼凑在一起。添加了:

$(this).bind('contextmenu', function() {
    return false;
});

到 mouseup 事件(记住这是在实际的菜单项上 - 您的 ul.mdl-menu)，一切都按预期工作。

意识到对于OP的问题来说可能为时已晚，但如果其他人偶然发现这个问题，我希望它有帮助!