Javascript mouse event Summary

Javascript mouse events are a huge family. There are eight common examples:

• Mousedown: the mouse button is pressed.
• Mouseup: the mouse button is released.
• Click: click the mouse button.
• Dblclick: the mouse button is pressed.
• Contextmenu: Right-click the menu.
• Mouseover: move the mouse over the target.
• Mouseout: move the mouse over the target.
• Mousemove: move the mouse over the target.

The mousedown event and the mouseup event can be said to be the time subdivision of the click event. The order is mousedown => mouseup => click. Therefore, a click event usually triggers several mouse events.

Click here to test how many mouse events are bound to one click ?!

Clear

With them, we can do many things, but it is obviously not enough for high-level applications (such as games, therefore, the Click Event of the mouse event is further subdivided based on whether it is a left-click or right-click event. In dom2.0, W3C uses the mouse event as an example, and the mouse event is parsed as a mouseevent (we can use E. constructor = mouseevent to determine whether it is a mouse event. Whether it is left-click or right-click is determined by a button attribute. The following is the W3C standard example:

• 1: Left click
• 2: press the middle key
• 3: Right-click

Of course, Microsoft will not compromise, because E. Button was originally implemented by Microsoft, and the Web site uses e. Which, but it is more complicated than Microsoft.

• 0: no key is pressed
• 1: Left click
• 2: Right-click
• 3: The left and right buttons are pressed at the same time.
• 4: press the middle key
• 5: both the left and middle buttons are pressed.
• 6: The key and right-click are both pressed
• 7: The three keys are simultaneously pressed.

For more details, see the table below.

Ge: gecko; SA: Safari; OP: opera; NS: Netscape

		IE	NS 4	GE ≥ 1.0 Sa 3 OP ≥ 8.0	Ge0.9	OP
E. Button	Left click	1	Undefined	0	1	1
	Key	4	Undefined	1	2	3
	Right-click	2	Undefined	2	3	2
E. Which	Left click	Undefined	1	1	1	1
	Key	Undefined	2	2	2	3
	Right-click	Undefined	3	3	3	2

To this end, you can use the following function to bind the left-right-click function.

Function bindmouseevent (EL) {var ARGs = []. slice. call (arguments), El = El | document; ARGs [0] = function () {}, ARGs [1] = ARGs [1] | ARGs [0], ARGs [2] = ARGs [2] | ARGs [0], argS [3] = ARGs [3] | ARGs [0], El. onmousedown = function (e) {e = E | window. event; var button = E. button; If (! E. which & isfinite (button) {e. which = [,] [button]; // 0 indicates meaningless now} ARGs [E. which] (e );}}
 

It accepts four parameters, the first is the bound object, the second is the left-click callback, the third is the middle-click callback, and the fourth is the right-click callback. The usage is as follows:

VaR El = document. getelementbyid ("Mouse"); var EX = document. getelementbyid ("explanation"); var left = function () {ex. innerhtml = "Left click pressed";} var middle = function () {ex. innerhtml = "";} var right = function () {ex. innerhtml = "right-click pressed";} bindmouseevent (El, left, middle, right );
 

Click here to test the function of binding the left-right mouse key.

 

In addition, you can obtain many useful parameters by clicking the mouse on the webpage, such as obtaining the coordinates of the current mouse. Based on the differences of the reference object, it is divided into the following sets of coordinate systems. One set uses the visible area of the current browser as the reference object (clientx, clienty), and the other set uses the screen of the display as the reference object (screenx, screeny ). In addition, Microsoft also has a set of Coordinate Systems (x, y), which are relative to the offsetparent of the event object. Firefox has another coordinate system (pagex, Pagey), which is relative to the current webpage. We can use the following function to obtain the coordinates of the mouse on the webpage.

VaR getcoordindocument = function (e) {e = E | window. event; var x = E. pagex | (E. clientx + (document.doc umentelement. scrollleft | document. body. scrollleft); var y = E. pagey | (E. clienty + (document.doc umentelement. scrolltop | document. body. scrolltop); Return {'X': X, 'y': y };}
 

Move the mouse here.

 

(Clientx, clienty) coordinate system, not affected by the scroll bar

As for Mouseover, mousemove, and mouseout, there is no difference in the browser. Let's take a look at the scroll wheel event. This difference is very serious. IE, Safari, opera, and chrome are mousewheel events, while Firefox is a dommousescroll event. In terms of event attributes, ie and so on are event. detail, and Firefox is event. wheeldelta. IE and so on are rolled up to 120, and rolled down to-120. Firefox rolls up a circle to-3, and it rolls down a circle to 3. We can construct a function to remove their differences.

VaR mousescroll = function (FN) {var roll = function () {var Delta = 0, E = arguments [0] | window. event; Delta = (E. wheeldelta )? E. maid/120:-(E. detail | 0)/3; FN (DELTA); // callback function in the callback function} If (window. netscape) {document. addeventlistener ('domainscroll', roll, false);} else {document. onmousewheel = roll ;}}
 

This function accepts a function as a parameter, for example:

 
Mousescroll (function (DELTA) {var OBJ = document. getelementbyid ('scroll '), current = parseint (obj. offsettop) + (delta * 10); obj. style. top = Current + "PX ";});
 

<Br/> <SCRIPT type = "text/JavaScript"> <br/> var $ = function (ID) {return document. getelementbyid (ID)} </P> <p> window. onload = function () {<br/> mousescroll (function (DELTA) {<br/> var OBJ = $ ('scroll '), <br/> current = parseint (obj. offsettop) + (delta * 10); <br/> obj. style. top = Current + "PX"; <br/>}); <br/>}</P> <p> var mousescroll = function (FN) {<br/> var roll = function () {<br/> var Delta = 0, <br/> E = arguments [0] | window. event; <br/> Delta = (E. wheeldelta )? E. maid/120:-(E. detail | 0)/3; <br/> FN (DELTA); // callback function in the callback function <br/>}< br/> If (window. netscape) {<br/> document. addeventlistener ('domainscroll', roll, false); <br/>}else {<br/> document. onmousewheel = roll; <br/>}</P> <p> </SCRIPT> <br/> <style title = "text/CSS"> <br/> # scroll {<br/> color: # FFF; <br/> Background: #369; <br/> width: 70px; <br/> Height: 70px; <br/> position: absolute; <br/> left: 500px; <br/> top: 200px; <br/>}< br/> </style> </P> <p> <Div id = "scroll"> move the box with the scroll wheel </div> <br />

RunCode

Related Topics:

Summary of JavaScript Keyboard Events

Compatible Writing of JavaScript processing events