Question

我需要检测用户何时在红色div框上方按下CTRL键。在这种情况下，我需要在鼠标旁边注入文本Ctrl key pressed。只要按下CTRL键，此文本就必须跟随鼠标光标。如果鼠标离开红色div框，则必须隐藏文本。此外，使用可以按下红色框内的ctrl键而不移动鼠标，并且还必须显示文本（并在释放ctrl键时隐藏）。

第一版HTML代码：

<div id="container">
    <div id="box" style="width: 300px; height: 200px; background-color: red;">
        Hello world
    </div>
</div>

第一版JAVASCRIPT代码：

    var mousePosition;
    $('#container').append('<p id="besideMouse">Ctrl key pressed</p>');
    $('#box').mousemove(function (e) {
        mousePosition = { top: e.pageY + 10, left: e.pageX + 10 };
    });
    $("#box").hover(function (e) {

        $(document).keydown(function (e) {
            if (e.ctrlKey) $('#besideMouse').show().offset(mousePosition);
        });
        $(document).keyup(function (e) {
            if (!e.ctrlKey) $('#besideMouse').hide();
        });
    }, function (e) {
        $(document).unbind("keydown");
        $('#besideMouse').hide();
    });

JSFIDDLE：http://jsfiddle.net/o7Lbc91o/2/

兼容Google Chrome＆amp; Internet Explorer。

请注意测试在jsfiddle内部，首先在Result区域内单击，否则它不起作用。

它有效但现在我需要使用live事件处理程序，原因在于这个基本示例中不可见的原因。原因（简而言之）是我有一个动态的网格，当它被排序时它不再起作用，所以我需要这个代码来重构。

所以我尝试重构在这里看到第二个版本：http://jsfiddle.net/tbdzxpk7/1/

但是第二个版本的问题（仅限于GOOGLE CHROME）：当按下ctrl键时，我的鼠标光标位于红色框内（并且没有移动光标）不再显示。它适用于IE，但不再适用于GC。

知道如何解决这个第二版吗？

PS：也许我的代码效率不高，所以如果有必要，请不要犹豫不决

感谢。

按下CTRL键时鼠标光标后面的文本

0 个答案: