检测鼠标左键按下

Question

我讨厌 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 也存在在那里。

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

Answer 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

Answer 2

现在有一个 W3C 标准 < 标准模式下的 IE9 和 Gecko 15+< /a>.

W3C 完全塞满了 event.button 属性，因此对于符合标准的browser 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');
    }
}

Answer 3

您可以使用以下代码 -

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

Answer 4

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

Answer 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;
}

说明：当鼠标按下时，我们将按钮数组中按下的按钮更改为 true。
当鼠标抬起时，我们将按下的按钮更改为 false。

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

为了简化事情，我们可以添加另一个变量 mousePressed 并标记鼠标是否按下或向上。

在 Chrome 上完美运行，我没有在其他浏览器中测试它，但我想它在 Firefox 和 Opera 中也可以...... IE ？？？我不在乎IE。