MDL菜单单击鼠标右键打开错误答案

【问题标题】：MDL menu click open with right mouse click bugMDL菜单单击鼠标右键打开错误
【发布时间】：2016-07-25 14:36:53
【问题描述】：

我制作这个小提琴是为了让调试更容易 -> 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 中打开相同的小提琴并执行相同的操作 - 注意菜单如何打开并立即关闭；（如果你用鼠标右键单击并按住，它会保持打开状态。另外，如果你用鼠标右键单击然后将光标移动到打开的菜单上，它也会保持打开状态）

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

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

感谢您对此进行调查并进行良好的调试（如果需要）。

【问题讨论】：

标签： javascript jquery google-chrome firefox material-design-lite

【解决方案1】：

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

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

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

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

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

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

【讨论】：