检测鼠标左键按下

Posted 2023-02-19

【中文标题】检测鼠标左键按下

【英文标题】：Detect left mouse button press

【发布时间】：2011-04-26 00:57:10

【问题描述】：

我讨厌这种由 W3C 和 MS 创建的鼠标按钮的混乱！我想知道当我收到 mousedown 事件时是否按下了鼠标左键。

我用这个代码

// Return true if evt carries left mouse button press
function detectLeftButton(evt) 
  // W3C
  if (window.event == null) 
    return (evt.button == 0)
  
  // IE
  else 
    return (evt.button == 1);
  

但是，它在 Opera 和 Chrome 中不起作用，因为碰巧 window.event 也存在那里。

那我该怎么办？我有一些浏览器检测，但我们都知道它不能依赖于最近一些浏览器所做的所有屏蔽。如何可靠地检测鼠标左键？

【问题讨论】：

我认为site:quirksmode.org left mouse button press 的前两个搜索结果会对您有所帮助。

我看了，里面什么都没有，只有鼠标右键的脚本

您可能想看看jQuery 是如何解决问题的，或者只是使用jQuery's mousedown 并查看event.which 的值。

我的站点中没有 jQuery，似乎 $.browser.msie 是另一个浏览器检测

阅读highest rated non-accepted answer，您将了解如何在不使用$.browser.msi 的情况下使用jQuery。

【参考方案1】：

更新的答案。以下将检测是否按下了鼠标左键且仅按下了鼠标左键：

function detectLeftButton(evt) 
    evt = evt || window.event;
    if ("buttons" in evt) 
        return evt.buttons == 1;
    
    var button = evt.which || evt.button;
    return button == 1;

有关在 javascript 中处理鼠标事件的更多信息，请尝试http://unixpapa.com/js/mouse.html

【讨论】：

这不起作用。 IE以外的所有浏览器中左键为0

这确实有效。 which 在除 IE 之外的所有浏览器中为左按钮返回 1，在该位置未定义。仅在 IE 中，我的button 变量将因此使用事件的button 属性的值，而不是which，左按钮为1。

虽然这确实有效 - 我会说这是一个非常好的解决方案 - 它仍然使用非标准化 event.which 属性。因此，具有讽刺意味的是，您使用非标准化属性来区分符合标准的浏览器和其他浏览器。 ;)

@hallvors：确实。不幸的是，识别鼠标按钮（以及识别按键）是标准与浏览器实现的现实相距甚远的一个领域。

@raina77ow 我认为您适合mouseover 事件，但代码适用于mousedown 事件（jsbin.com/mupiri），这就是最初的问题。我会更新答案以检查buttons 是否存在。

【参考方案2】：

现在IE9 in standards mode 和Gecko 15+ 支持W3C standard event.buttons 属性。

W3C completely stuffed 增加 event.button 属性，因此对于符合标准的浏览器 event.button 为 0，但对于在标准之前创建的浏览器，event.button 为 1。

所以代码必须避免使用event.button，旧版浏览器除外。以下代码应该可以工作：

function detectLeftButton(event) 
    if (event.metaKey || event.ctrlKey || event.altKey || event.shiftKey) 
        return false;
     else if ('buttons' in event) 
        return event.buttons === 1;
     else if ('which' in event) 
        return event.which === 1;
     else 
        return (event.button == 1 || event.type == 'click');
    

【讨论】：

+1。这看起来像是对我的回答的改进，尽管根据要求，您可能希望与buttons 进行按位比较（例如，值 3 表示按下鼠标左键和右键）。这个特定的问题似乎暗示 OP 想知道是否按下了左按钮，而不管任何其他按钮的状态如何，因此按位比较是合适的。示例：return (event.buttons & 1) === 1;

@TimDown - 我认为不需要按位检查，因为没有它，代码会更简单。从可用性来看，如果用户按下了两个按钮，那么它们的含义可能与通常的左键单击不同。出于同样的原因，在我自己的代码中，我还检查了!event.metaKey && !event.ctrlKey && !event.altKey && !event.shiftKey 以防止捕获其他点击（shift-click 与 click 不同）。

【参考方案3】：

您可以使用以下代码-

onmouseup="if(window.event.which==1)//code for left click
           else if(window.event.which==3)//code for right click"

【讨论】：

没有检测到上下文菜单和右键单击。

【参考方案4】：

即使 event.buttons 现在可以在 Chrome 中使用，Safari 仍然不支持它。一种解决方法是在文档或父级使用 onmousedown 和 onmouseup 事件，例如： onmousedown="bMouseDown=true" onmouseup="bMouseDown=false"

【参考方案5】：

// 0 left, 2 right, 1 middle, other.. extra buttons, gaming mouses

var buttonsArray = [false, false, false, false, false, false, false, false, false];
var mousePressed = false;

document.onmousedown = function(e) 
    buttonsArray[e.button] = true;
    mousePressed = true;
;

document.onmouseup = function(e) 
    buttonsArray[e.button] = false;
    mousePressed = false;
;

document.oncontextmenu = function() 
    return false;

解释：当鼠标按下时，我们将按钮数组中的按下按钮更改为真。 当鼠标向上时，我们将按下的按钮更改为 false。

现在我们可以更准确地确定哪个按钮被按下了，但是我们遇到了右键单击问题。因为使用该按钮，我们在浏览器中打开了一个上下文菜单，而这逃脱了我们的控制...所以，我们禁用了上下文菜单为了正确检测右键单击。如果我们不这样做，我们也必须解决左键单击问题......而且它的复杂性会逃脱此响应。

为了简单起见，我们可以添加另一个变量mousePressed 并标记鼠标是向下还是向上。

在 chrome 上完美运行，我没有在其他浏览器中测试它，但我想它在 firefox 和 opera 中也可以... IE ???我不在乎 IE。

尽情享受吧！