我想检测鼠标移动事件期间鼠标右键还是左键按下
我正在使用 HTML5，想知道在鼠标移动期间是否按住了鼠标右键或左键。鼠标右键有 event.button = 2 表示右键。左按钮的 event.button = 0。在鼠标移动期间，event.button = 0 始终。我提供了一些示例代码。我做错了什么？
<!DOCTYPE html>
<html lang="en">
<head>
<title>demo on detecting mouse buttons</title>
<meta charset="utf-8"/>
<style>
#mycanvas{ border-style:solid; width:400px; height:400px; border-width:2px;}
</style>
<script type="text/javascript">
function detectDown(event)
{
var string = "Mouse Down, event.button = " +event.button;
var canvas = document.getElementById("mycanvas");
var context = canvas.getContext("2d");
context.clearRect(0,0,300,20);
context.fillText(string,0,10);
}
function detectMove(event)
{
var string = "Mouse Move, event.button = " +event.button;
var canvas = document.getElementById("mycanvas");
var context = canvas.getContext("2d");
context.clearRect(0,30,300,20);
context.fillText(string,0,40);
}
function detectUp(event)
{
var string = "Mouse Up, event.button = " +event.button;
var canvas = document.getElementById("mycanvas");
var context = canvas.getContext("2d");
context.clearRect(0,60,300,20);
context.fillText(string,0,70);
}
</script>
</head>
<!-- -->
<body>
<canvas id="mycanvas"onmousedown="detectDown(event)" onmouseup="detectUp(event)" onmousemove="detectMove(event)" >
</canvas>
</body>
</html>
I am using HTML5 and want to know if the right mouse button or left mouse button is held down during a mouse move. The right mouse button has event.button = 2 for the right button. The left button has event.button = 0. During the mousemove, event.button = 0 always. I have supplied some sample code. What am I doing wrong?
<!DOCTYPE html>
<html lang="en">
<head>
<title>demo on detecting mouse buttons</title>
<meta charset="utf-8"/>
<style>
#mycanvas{ border-style:solid; width:400px; height:400px; border-width:2px;}
</style>
<script type="text/javascript">
function detectDown(event)
{
var string = "Mouse Down, event.button = " +event.button;
var canvas = document.getElementById("mycanvas");
var context = canvas.getContext("2d");
context.clearRect(0,0,300,20);
context.fillText(string,0,10);
}
function detectMove(event)
{
var string = "Mouse Move, event.button = " +event.button;
var canvas = document.getElementById("mycanvas");
var context = canvas.getContext("2d");
context.clearRect(0,30,300,20);
context.fillText(string,0,40);
}
function detectUp(event)
{
var string = "Mouse Up, event.button = " +event.button;
var canvas = document.getElementById("mycanvas");
var context = canvas.getContext("2d");
context.clearRect(0,60,300,20);
context.fillText(string,0,70);
}
</script>
</head>
<!-- -->
<body>
<canvas id="mycanvas"onmousedown="detectDown(event)" onmouseup="detectUp(event)" onmousemove="detectMove(event)" >
</canvas>
</body>
</html>
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（2）
鼠标移动事件必然与按钮无关。无论是否按下按钮，它都会报告鼠标移动。您需要在
mousedown上创建一个标志来跟踪哪个按钮被按下；在mouseup上重置它。The mouse move event is necessarily button-agnostic. It reports mouse movement, regardless of whether buttons are pressed or not. You need to create a flag on
mousedownthat tracks which button is down; reset it onmouseup.事实上，你可以：
注意：当您想运行IE8以下的代码时，请使用
attachEvent绑定mousemove。Actually, you can:
Notice: when you want to run the code below IE8, use
attachEventto bindmousemove.