The following 8 are common:
MouseDown: The portals of the mouse is pressed.
MouseUp: The portals of the mouse is released and bounced.
Click: Portals of the mouse.
DblClick: The portals of the mouse is pressed.
ContextMenu: Right-click menu pops up.
MouseOver: Moves the mouse over the target.
Mouseout: The mouse moves above the target.
MouseMove: The mouse moves above the target. The
MouseDown event and the MouseUp event can say the Click event is broken down in time, in the order of MouseDown => MouseUp => click. Therefore, a click event usually triggers several mouse events.
<script type= "Text/javascript" > var loadevent = function (fn) {var oldonload = window.onload; if (typeof window.onload!= ' function ') {window.onload = fn; }else {window.onload = function () {oldonload (); FN (); }} var checkevents = function () {var demo = document.getElementById ("mouse"); var ex = document.getElementById ("explanation"); Demo.onclick = function () {Ex.style.display = "block"; ex.innerhtml + = "click<br>"} Demo.ondblclick = function () {Ex.style.display = "block"; ex.innerhtml + = "dblclick<br>"} demo.onmouseup = function () {Ex.style.display = "block"; ex.innerhtml + = "mouseup<br>"} Demo.onmousedown = function () {Ex.style.display = "block"; ex.innerhtml + = "mousedown<br>"} Demo.oncontextmenu = function () {Ex.style.display = "block"; ex.innerhtml + = "contextmenu<br>"} var clearcontent = function () {var reset = document.getElementById ("Clear Content "); var ex = document.getElementById ("ExplanAtion "); Reset.onclick = function () {ex.innerhtml = '; Ex.style.display = "None"; } loadevent (function () {clearcontent (); Checkevents (); }) </script> <div id= "Mouse" > Please click here to test the number of mouse events bundled with a click!! </div> <p><button type= "button" id= "ClearContent" > Empty </button></p> <div id= " Explanation "></div>
[Ctrl + A All SELECT Note: If the need to introduce external JS need to refresh to perform]
With them, we can do a lot of things, but for high-level applications (such as games) is obviously not enough, so the click of the event mouse events and according to the left or right key to subdivide. In DOM2.0, the mouseevent is the mouse event, and the mouse event is resolved to the event (we can use e.constructor = = MouseEvent To determine whether it is a mouse incident, is left-click or right-click by its one called Button property determination. The following are the standards of the consortium:
0: Press the left button
1: Press the middle key (if any)
2: Press the right button
Of course, Microsoft will not compromise, because E.button was originally Microsoft to achieve, Netscape used is E.which, but relatively, Microsoft is much more complex.
0: No key was pressed
1: Press the left button
2: Press the right button
3: The left and right keys are pressed at the same time
4: Press the middle button
5: The left and middle keys are pressed at the same time
6: The middle and right keys are pressed at the same time
7: Three keys are pressed at the same time
See the table below for more details.
Ge:gecko; Sa:safari; Op:opera; Ns:netscape
|
IE |
NS 4 |
ge≥1.0
SA 3
op≥8.0 |
GE0.9 |
op<8.0 |
| E.button |
Left |
1 |
Undefined |
0 |
1 |
1 |
| Middle Key |
4 |
Undefined |
1 |
2 |
3 |
| Right key |
2 |
Undefined |
2 |
3 |
2 |
| E.which |
Left |
Undefined |
1 |
1 |
1 |
1 |
| Middle Key |
Undefined |
2 |
2 |
2 |
3 |
| Right key |
Undefined |
3 |
3 |
3 |
2 |
for this we can use the following functions to bind the left and right keys.
Copy Code code as follows:
var mouseevent = function () {
var arg = arguments[0],
el = Arg.el | | Document
LEFTFN = Arg.left | | function () {},
RIGHTFN = Arg.right | | function () {},
Middlefn = Arg.middle | | function () {},
buttons = {};
El.onmousedown = function (e) {
E = e | | window.event;
if (!+ "\v1") {
Switch (E.button) {
Case 1:buttons.left = true; Break
Case 2:buttons.right = true; Break
Case 4:buttons.middle = true; Break
}
}else{
Switch (E.which) {
Case 1:buttons.left = True;break;
Case 2:buttons.middle = true; Break
Case 3:buttons.right = True;break;
}
}
if (buttons.left) {
LEFTFN ();
}else if (buttons.middle) {
Middlefn ();
}else if (buttons.right) {
RIGHTFN ();
}
buttons = {
"Left": false,
"Middle": false,
' Right ': false
};
}
}
It accepts a hash parameter, which is optional. The El of the hash is the element for which the mouse event is to be bound, left is the event that is fired by clicking on the left-hand button, and the other two analogies. Usage is as follows:
Copy Code code as follows:
var el = document.getElementById ("mouse");
var ex = document.getElementById ("explanation");
var left = function () {
ex.innerhtml = "left button is pressed";
}
var right = function () {
ex.innerhtml = "Right button is pressed";
}
MouseEvent ({el:el,left:left,middle:null,right:right});
<div id= "Mouse2" > click here to test the left and right mouse button binding function </div> <div id= "Explanation2" > </div> <SCR IPT type= "Text/javascript" > var loadevent = function (fn) {var oldonload = window.onload; if (typeof window.onload!= ' function ') {window.onload = fn; }else {window.onload = function () {oldonload (); FN (); }} var mouseevent = function () {var arg = arguments[0], el = Arg.el | | document, LEFTFN = Arg.left | | function () {}, Rightfn = Arg.right | | function () {}, Middlefn = Arg.middle | | function () {}, buttons = {}; El.onmousedown = function (e) {e = e | | window.event; if (!+ "\v1") {switch (E.button) {case 1:buttons.left = true; Case 2:buttons.right = true; Break Case 4:buttons.middle = true; Break }}else{switch (E.which) {case 1:buttons.left = true;break; Case 2:buttons.middle = true; Break Case 3:buttons.right = True;break; } if (Buttons.left) {leftfn (); }else if (buttons.middle) {middlefn (); }else if (buttons.right) { RIGHTFN (); } buttons = {"Left": false, "middle": false, ' right ': false}; } var Checkeventbutton = function () {var el = document.getElementById ("Mouse2"); var ex = document.getElementById ("Explanation2"); The var left = function () {ex.innerhtml = button is pressed; The var middle = function () {ex.innerhtml = "middle key is pressed"; The var right = function () {ex.innerhtml = "right-click"; } mouseevent ({el:el,left:left,middle:middle,right:right}); } loadevent (function () {Checkeventbutton (); }) </script>
[Ctrl + A All SELECT Note: If the need to introduce external JS need to refresh to perform]
In addition, with the mouse click on the Web page, we can also get a lot of useful parameters, such as getting the current mouse coordinates. According to its different reference, divided into the following sets of coordinate systems. The set is based on the visual area of the current browser (ClientX, ClientY), and the other is based on the screen of the Monitor (ScreenX, ScreenY). In addition, Microsoft also has a set of coordinate systems (X,Y), which is relative to the object that triggers the event offsetparent, Firefox has a different coordinate system (Pagex, Pagey), which is relative to the current page. We can use the following function to get the mouse in the coordinates of the Web page.
Copy Code code as follows:
var getcoordindocument = function (e) {
E = e | | window.event;
var x = E.pagex | | (E.clientx +
(Document.documentElement.scrollLeft
|| Document.body.scrollLeft));
var y= e.pagey | | (E.clienty +
(Document.documentElement.scrollTop
|| DOCUMENT.BODY.SCROLLTOP));
return {' X ': x, ' y ': y};
}
<script type= "Text/javascript" > var loadevent = function (fn) {var oldonload = window.onload; if (typeof window.onload!= ' function ') {window.onload = fn; }else {window.onload = function () {oldonload (); FN (); "}} var getcoordindocumentexample = function () {var coords = document.getElementById (" coords "); Coords.onmousemove = function (e) {var pointer = getcoordindocument (e); var coord = document.getElementById ("coord"); coord.innerhtml = "x,y=" ("+pointer.x+", "+pointer.y+") "; } var getcoordindocument = function (e) {e = e | | window.event; var x = E.pagex | | (E.clientx + (Document.documentElement.scrollLeft | | document.body.scrollLeft)); var y= e.pagey | | (E.clienty + (Document.documentElement.scrollTop | | document.body.scrollTop)); return {' X ': x, ' y ': y}; } loadevent (function () {getcoordindocumentexample (); }); </script> <div id= "coords" > Please move the mouse here. </div> <div id= "coord" > </div>
[Ctrl + A All SELECT Note: If the need to introduce external JS need to refresh to perform]
(clientx,clienty) coordinate system, not affected by scroll bars
As for mouseover,mousemove,mouseout, there is nothing to say and no browser difference. We look at the mouse wheel event, this difference is very serious. IE, Safari, Opera, Chrome is the MouseWheel event, Firefox is the Dommousescroll event. For event properties, IE is an event. Wheeldelta,firefox is an event. Detail ie, and so on to roll up a lap of 120, rolling down a lap of 120. Firefox rolls up one lap for-3 and rolls down one lap for 3. We can construct a function to remove their differences.
Copy Code code as follows:
var mousescroll = function (fn) {
var roll = function () {
var delta = 0,
E = Arguments[0] | | window.event;
Delta = (E.wheeldelta)? E.WHEELDELTA/120:-(E.detail | | 0)/3;
fn (delta);//callback function in callback function
}
if (/a/[-1]== ' a ') {
Document.addeventlistener (' Dommousescroll ', roll, false);
}else{
Document.onmousewheel = roll;
}
}
This function takes a function as an argument, such as:
Copy Code code as follows:
Mousescroll (function (delta) {
var obj = document.getElementById (' scroll '),
Current = parseint (obj.offsettop) + (DELTA*10);
Obj.style.top = current+ "px";
});
<textarea id="runcode12037"><script type= "Text/javascript" > var $ = function (ID) {return document.getElementById (id)} window.onload = Fu Nction () {Mousescroll (function (delta) {var obj = $ (' scroll '), current = parseint (obj.offsettop) + (DELTA*10); Obj.style.top = current+ "px"; }); var mousescroll = function (fn) {var roll = function () {var delta = 0, E = arguments[0] | | window.event; Delta = (E.wheeldelta)? E.WHEELDELTA/120:-(E.detail | | 0)/3; fn (delta); The callback function in the callback function} if (/a/[-1]== ' a ') {Document.addeventlistener (' dommousescroll ', roll, false); }else{document.onmousewheel = roll; } </script> <style title= "Text/css" > #scroll {color: #fff; Background: #369; width:70px; height:70px; Position:absolute; left:500px; top:200px; } </style> <div id= "Scroll" > Please use the mouse wheel to move the squares </div></textarea>
[Ctrl + A All SELECT Note: If the need to introduce external JS need to refresh to perform]
