How to determine whether the left mouse button is pressed in javascript

In JavaScript, it is a common requirement to determine whether the left mouse button is pressed. In web applications that use the mouse to interact, we usually want to be able to monitor in real time whether the left mouse button is pressed when the user moves the mouse, so that subsequent operations can be performed. This article will introduce some techniques and methods to realize the judgment of left mouse button press.

1. Determine whether the left mouse button is pressed through the buttons property of the MouseEvent object

When the mouse moves, the browser will trigger the MouseEvent event. The MouseEvent object contains a buttons property, which indicates which buttons on the mouse are currently pressed. For the left mouse button, the value of the buttons property is 1. Therefore, we can determine whether the left mouse button is pressed by determining whether the buttons property of the MouseEvent object is equal to 1. The following is a simple sample code:

document.addEventListener('mousemove', function(event) { if (event.buttons === 1) { console.log('鼠标左键被按下了'); } });

2. Determine whether the left mouse button is pressed by judging the button properties of mousedown and mouseup events

When the mouse is pressed or When released, the browser will trigger mousedown and mouseup events respectively. The MouseEvent object contains a button property, which indicates which mouse button was pressed or released. For the left mouse button, the value of the button property is 0. Therefore, we can determine whether the left mouse button is pressed by determining whether the button property of the mousedown and mouseup events is equal to 0. The following is a sample code:

document.addEventListener('mousedown', function(event) { if (event.button === 0) { console.log('鼠标左键被按下了'); } }); document.addEventListener('mouseup', function(event) { if (event.button === 0) { console.log('鼠标左键被释放了'); } });

It should be noted that in the above sample code, we listened to the mousedown and mouseup events respectively. This is because when the left mouse button is pressed, the mousedown event is triggered; when the left mouse button is released, the mouseup event is triggered.

3. Save the left mouse button down state by using global variables or closures

In some cases, we may need to save it over a longer period of time The pressed state of the left mouse button, and perform some operations based on this. At this time, we can use a global variable or closure to save the pressed state of the left mouse button. The following is a sample code:

var isMouseDown = false; document.addEventListener('mousedown', function(event) { if (event.button === 0) { isMouseDown = true; } }); document.addEventListener('mouseup', function(event) { if (event.button === 0) { isMouseDown = false; } }); document.addEventListener('mousemove', function(event) { if (isMouseDown) { console.log('鼠标左键被按下了'); // 进行一些操作 } });

In the above sample code, we save the pressed state of the left mouse button through a global variable isMouseDown. When the left mouse button is pressed, we set isMouseDown to true; when the left mouse button is released, we set isMouseDown to false. In the listening function of the mouse movement event, some operations are performed only when isMouseDown is true.

Summary

In JavaScript, it is a common requirement to determine whether the left mouse button is pressed. This article introduces three techniques and methods for determining whether the left mouse button is pressed. Specifically, we can achieve this function through the buttons property of the MouseEvent object, the button property of the mousedown and mouseup events, or using a global variable or closure to save the pressed state of the left mouse button. In actual development, we can choose to use corresponding techniques and methods according to specific needs.

The above is the detailed content of How to determine whether the left mouse button is pressed in javascript. For more information, please follow other related articles on the PHP Chinese website!