Question

当他们在键盘上按ctrl+m时，我试图让访问者的鼠标坐标显示动态javascript菜单（包含在div中）（m表示菜单，{{ 1}}在大多数浏览器中都没有受到限制（据我所知）。这样，无论他们在我的网站上以及他们的鼠标位于何处，他们都可以通过按下该组合来拉起菜单并返回到他们想去的任何地方。同时，在按下键之前不显示菜单允许我完全控制设计体验而不必担心导航菜单。

我已经将我在这里找到的两个不同的代码拼凑在一起，试图自己做，但我遇到了一个意想不到的问题。

我不确定如何在事件处理程序中表示ctrl+m组合键。
我在代码检查器上遇到了一些错误，我不确定如何修复自己。
我不知道怎么做才能让菜单出现在ctrl + m上，然后再一直按住ctrl+m（切换开关）。

我还在学习Javascript的工作原理。

这是我到目前为止取得的进展的链接：http://jsfiddle.net/nrz4Z/

Answer 1

在您的示例中，您将绑定mousemove处理程序中的keypress处理程序。你需要单独完成它们：

var mouseX;
var mouseY;
$(document).ready(function () {

    $(document).mousemove(function (e) {
        mouseX = e.pageX;
        mouseY = e.pageY;
    });

    $(document).keypress(function (event) {
        if (event.which == 109) {
            $('#examples').css({
                'top': mouseY,
                'left': mouseX
            }).fadeIn('slow');
        };
    });
});

这应该可以让你获得显示菜单的位置。

Answer 2

首先使用按键并不是一个好主意 - 网络是在不知名的浏览器和设备和插件上的东西，你不知道哪些快捷方式特别适合使用带有单个密钥的修饰符（在这种情况下，cmd + m或ctrl + m是一个操作系统快捷方式，用于最小化许多操作系统上的窗口.ctrl在os x中以cmd形式存在，而在手机上则不存在。）

要检测多个按键，请点击此处：Can jQuery .keypress() detect more than one key at the same time?

接下来，您可以检测鼠标移动并将其存储在变量中，以便在任何地方使用：How to get mouse position in jQuery without mouse-events?

然后你的菜单应该位于DOM的底部，只有body作为它的父级：

<nav>
  <p>My Menu</p>
<nav>
</body>

你的导航应该具有css所需的任何样式，以及：

nav {
  position: absolute;
  display: none;
  /*z-index: 700; nav is at bottom of dom so it will go above anything without a z-index but you may want it to go over other things */
}

当你检测到按键时，你应该这样做：

$('nav').css({top: mouseYCoord, left: mouseYCoord}).show();

显然，为您的菜单提供更有用的名称，不要选择所有'nav'标签。

Keypress上鼠标光标的FadeIn Div [Javascript / JQuery]

2 个答案: