简体   繁体   中英

JavaScript MouseMove Event properties

I read the Mozilla documentation page about the MouseMove Event.
And in the properties table there are 2 properties that I do not understand how they work.

The details property which by description is: "A count of consecutive clicks that happened in a short amount of time, incremented by one."

What dose Mozilla consider consecutive, how long is the time between the clicks to insure the count. Can I configure it to be shorter or longer time period?

The buttons property, which stats the description with: "The buttons depressed when the mouse event was fired".

What is a depressed button? Is it the button state at the mouseup event?
This is no mention of this phase or state in the mouseup event nor in the mousedown event So what is it?

The details property give the click count in a short amount of time. The "short amount time" is the duration for a double click to be a valid input. In your particular case when you move your mouse over an element you will get a series of mousemove events fired however the mousemove event disregards the details property.. i guess moving the mouse and clicking doesn't make much sense. If you try it with click event you will notice how it works.

 md.addEventListener("click", e => console.log(e.detail));
 #md { width: 300px; height: 200px; text-align: center; background-color: thistle; }
 <div id="md">Click</div>

it will count your clicks until the tiny duration for a double click is sensed. I guess you may change this time from your operating system mouse interface.

buttons property is very clearly explained in MDN as;

The buttons depressed when the mouse event was fired: Left button=1, Right button=2, Middle (wheel) button=4, 4th button (typically, "Browser Back" button)=8, 5th button (typically, "Browser Forward" button)=16. If two or more buttons are depressed, returns the logical sum of the values. Eg, if Left button and Right button are depressed, returns 3.

It gives you which button(s) is pressed when you have your particular mouse event fired. This time it makes sense with the mousemove event since it gives you the button numbers as said in the MDN above description.

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM