Блог

Главная - Вопросы по программированию - Я хочу определить, нажата ли правая или левая кнопка мыши во время события mousemove

Я хочу определить, нажата ли правая или левая кнопка мыши во время события mousemove

#javascript #html #mousemove

#javascript #HTML #mousemove

Вопрос:

Я использую 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>

Комментарии:

1. Вы можете найти jsfiddle.com полезно для такого рода тестов и демонстраций.

Ответ №1:

Событие перемещения мыши обязательно зависит от кнопок. Он сообщает о движении мыши, независимо от того, нажаты кнопки или нет. Вам нужно создать флаг для mousedown отслеживания того, какая кнопка нажата; сбросьте его mouseup .

Ответ №2:

На самом деле, вы можете:

 document.body.addEventListener('mousemove', e => console.log(`mousedown: ${(e.buttons | e.button) === 1} when mousemove`)); 
 html, body {
  height: 100%;
}

div {
  border: 2px dashed #a10000;
  height: 100%;
  text-align: center;
} 
 <div>mousemove here</div>

Обратите внимание: если вы хотите запустить код ниже IE8, используйте attachEvent для привязки mousemove .

Метки: