Question

我有以下Javascript代码。如果你在div中按下鼠标中键和右键同时它们移动到浏览器外面，两个按钮仍然按下你然后释放其中一个。这是公认的。但如果你释放另一个，这是不被承认的。是否有一种方法可以识别第二个鼠标按钮的释放，或者当鼠标移回浏览器窗口时能够找到哪些按钮上/下以便状态可以更新。

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <script src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
    </head>

    <body>
        <div style="height:250px;background-color: pink"> </div>
        <script type="text/javascript">
        var doc = $(document);
        var buttons = [ false, false, false ];
        function mouseDown(e) {
            buttons[e.which - 1] = true;
            console.log(buttons);
            e.preventDefault();
        }

        function mouseUp(e) {
            buttons[e.which - 1] = false;
            console.log(buttons);
            e.preventDefault();
        }

        doc.on("mousedown", mouseDown);
        doc.on("mouseup", mouseUp);
        </script>
    </body>  
</html>

修改

代码为here

编辑2

或者，任何人都知道为什么这是不可能的以及任何声明这是不可能的参考。

Answer 1

您可以使用文档的mouseenter和事件的buttons属性来确定重新输入文档时关闭的按钮：

doc.on("mouseenter", function(e) { 
    console.log("mouseenter: " + e.target + " buttons: " + e.buttons);
   //if (Object.prototype.toString.call(e.target) == '[object HTMLHtmlElement]') {
        if (e.buttons == 1){
             //left button
        }
        if (e.buttons == 2){
             //right button
        }
        if (e.buttons == 4){
             //middle
        }
    }
});

请参阅this link了解鼠标事件的buttons属性。

更新

以上链接：A number representing one or more buttons. For more than one button pressed, the values are combined.所以

if (e.buttons == 1){
    //left button
}
else if (e.buttons == 2){
    //right button
}
else if (e.buttons == 4){
    //middle
}
else if (e.buttons == 3){
    //left and right
}
else if (e.buttons == 6){
    //middle and right
}
else if (e.buttons == 7){
    //all 3
}

更新2：

第二次鼠标注册的原因是没有注册是因为在第一次鼠标注册后，浏览器停止收听mousemove事件。使用下面的处理程序在问题中尝试您的方案。鼠标移动将保持触发，直到你放开第一个按钮。一旦释放第一个按钮，移动就不会再被触发。我想我可以在鼠标上使用setCapture或focus来让窗口继续观看鼠标，但它不起作用。

window.addEventListener("mouseup", function( event ) {
      console.log("window mouse up");
      //window.focus();
      //event.target.setCapture(true);
  }, false);

window.addEventListener("mousemove", function( event ) {
      console.log("window mouse move");
  }, false);

Answer 2

返回鼠标事件（http://www.w3.org/TR/DOM-Level-3-Events/#event-type-mouseup）的w3c规范：

1 /＆＃34;当在元素上释放指针设备按钮时，用户代理必须调度此事件。＆＃34;

2 / 创作说明：在某些实施环境中，例如浏览器，即使指点设备已经离开用户代理的边界，也可以调度鼠标事件，例如，如果用户按下鼠标按钮开始拖动操作。

结论：您可能捕获的mouseup事件仅触发允许窗口外部丢弃。并且因为1指针=最大1次丢弃，所以只要你只有1个指针就没有理由你能抓住另一个事件。

对于您的问题：当指针返回到文档时，您无法知道按下哪个按钮，您必须考虑两个按钮都是defaut，并且只要您在文档级别获得mouseup事件

Answer 3

也许尝试类似的东西

$(document).ready(function() {
    var doc = $(document);
    var buttons = [ false, false, false ];
    function mouseDown(e) {
        buttons[e.which - 1] = true;
        console.log(buttons);
        e.preventDefault();
        alert("down")
    }

    function mouseUp(e) {
        buttons[e.which - 1] = false;
        console.log(buttons);
        e.preventDefault();
        alert("up")
    }

    doc.on("mousedown", mouseDown);
    doc.on("mouseup", mouseUp);

}）;

Answer 4

在那一刻，你的鼠标离开浏览器并释放按钮，浏览器将失去焦点。这是由操作系统引起的。浏览器需要专注于触发事件。当密钥被释放时，我不知道你想要做什么，但也许你可以尝试$(window).on('blur')，因为我了解到，身体事件，窗口事件和文档事件之间存在很大差异。此外，鼠标事件也会触发到该目标，鼠标在释放按钮的同时进行目标

Answer 5

mouseup事件与指针所在的位置有关，这是预期的行为。如果您希望按钮正确设置样式，请同时绑定mouseleave事件。

为什么这个Javascript无法识别鼠标？

5 个答案: