如何同时检测按键和鼠标悬停

Posted 2023-02-22

【中文标题】如何同时检测按键和鼠标悬停

【英文标题】：How to detect a keypress AND a mouseover at the same time

【发布时间】：2013-08-09 02:44:13

【问题描述】：

好的，我可以使用 .on('mouseover') 检测鼠标悬停

我可以使用

检测按键

$(document).keypress(function(e) 
        console.log(e.which);

但是当我按下某个按钮时，如何检测鼠标悬停在哪个图像上？

这个想法是能够通过在将鼠标悬停在图像上时按 d 来删除图像。有什么想法吗？

【问题讨论】：

+1：好问题。这在游戏编程中也有应用。

【参考方案1】：

您可以切换一个类或数据属性，以显示当前正在悬停的类或数据属性

$('img').hover(function()
   $(this).toggleClass('active'); // if hovered then it has class active
);
$(document).keypress(function(e)     
    if(e.which == 100)
       $('.active').remove(); // if d is pressed then remove active image
    
);

FIDDLE

【参考方案2】：

我用 jsFiddle 添加了一个更好的例子： http://jsfiddle.net/cUCGX/（将鼠标悬停在其中一个框上并按 Enter。）

---

给每个图像一个 on('mouseover') 并根据该图像设置一个变量。

所以

var activeImage = null;

myImage.on('mouseover', function() 
  activeImage = 'myImage';
);

myImage2.on('mouseover', function() 
  activeImage = 'myImage2';
);

$(document).keypress(function(e) 
  if (e.which == 'certainKeyPress'  && activeImage) 
    //do something with activeImage
    console.log('The cursor was over image: ' + activeImage + ' when the key was pressed');
  
);

如果您希望按键仅在悬停时起作用，也可以为每个图像添加一个 onmouseout 以清除 activeImage。

【参考方案3】：

您应该使用 mousemove 事件将 x & y 位置永久存储在全局变量中。

然后，在按键处理程序中，使用 document.elementFromPoint(x, y) 方法在最后一个已知的鼠标位置抓取元素。

见https://developer.mozilla.org/en-US/docs/Web/API/document.elementFromPoint

【参考方案4】：

我将继续解决这个问题，因为我正在玩这个，发现我更喜欢我的快速解决方案。它可能不是最好的，但它更适合我需要命名空间类型解决方案的需求，因为当 dom 处于某种状态（可排序）时，处理程序将被删除：

// Create handler for binding keyup/down based on keyCode
// (ctrl in this example) with namespace to change the cursor
var setCursorBindings = function() 
    $(document).on('keydown.sortable', function(event) 
        if (event.keyCode === 17) 
            $('body').css('cursor', 'pointer');
        
    ).on('keyup.sortable', function(event) 
        if (event.keyCode === 17) 
            $('body').css('cursor', 'inherit');
        
    );
;

// Create a handler for reverting the cursor 
// and remove the keydown and keyup bindings.
var clearCursorBindings = function() 
    $('body').css('cursor', 'inherit');
    $(document).off('keydown.sortable').off('keyup.sortable');
;

// Use the jQuery hover in/out to set and clear the cursor handlers
$('.myElementSelector').hover(function() 
    setCursorBindings();
, function() 
    clearCursorBindings();
);

在 Chrome v41 中测试

【参考方案5】：

用这个来测试鼠标是否在id为img的图片上：

$('#img').is(":hover")