按键上鼠标光标处的 FadeIn Div [Javascript/JQuery]答案

【问题标题】：FadeIn Div at Mouse Cursor on Keypress [Javascript/JQuery]按键上鼠标光标处的 FadeIn Div [Javascript/JQuery]
【发布时间】：2013-07-31 16:40:13
【问题描述】：

我正在尝试在访问者的鼠标坐标上显示一个动态 javascript 菜单（包含在 div 中），当他们在键盘上按下 ctrl+m 时（m 表示菜单，ctrl+m 在大多数浏览器中未绑定为据我所知）。这样，无论他们在我的网站上的什么地方，无论他们的鼠标在哪里，他们都可以通过按下该组合来拉出菜单并返回到他们想去的任何地方。同时，在他们按下键之前不显示菜单让我可以完全控制设计体验，而不必担心导航菜单。

我将在这里找到的两段不同的代码组合在一起，试图自己完成这项工作，但我遇到了一个意想不到的问题。

我不知道如何在事件处理程序中表示 ctrl+m 组合键。
我在代码检查器上遇到几个错误，我不确定如何修复自己。
我不知道如何使菜单显示在 ctrl+m 上，并一直停留在那里直到再次按下 ctrl+m（拨动开关）。

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

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

【问题讨论】：

jsbin这个月有点破，用jsFiddle试试
@RokoC.Buljan 谢谢！我已经相应地编辑了正文。

标签： javascript jquery cursor toggle keypress

【解决方案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');
        };
    });
});

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

【讨论】：

jsfiddle.net/s3mdJ 我试图让它在这里工作，但无济于事。我想知道它是否需要一个 .show();在 .fadeIn(); 之前实现。有什么想法吗？
您有一个语法错误并且没有包含 jquery。我解决了这些问题，发现了一些奇怪的东西......按“m”导致e.which被设置为109，而shift + m是77。但是......这是一个工作小提琴：jsfiddle.net/js26s

【解决方案2】：

首先，使用 keypress 不是一个好主意 - 网络是存在于数量不详的浏览器、设备和插件上的东西，您不知道哪些快捷方式绑定到特别是使用单个键的修饰符的快捷方式（在这种情况下 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();

显然给你的菜单一个更有用的名字，不要选择所有的“导航”标签。

【讨论】：