Mouse events in detail

Click: Click event. Dblclick: Double-click event. Mousedown: Triggered when the mouse button is pressed. Mouseup: Triggered when the mouse key is released. Mousemove: mouse movement event. Mouseover: Move in event. Mouseout: Remove event. Mouseenter: Move in event. Mouseleave: Remove the event. Contextmenu: right-click event.

The mouseover event and mouseEnter event are both triggered when the mouse enters a node. The difference is that the MouseEnter event fires only once, whereas the Mouseover event fires multiple times on the child nodes whenever the mouse moves within the node.

var div = document.getElementById("div") var p = document.getElementById("p") div.onmouseover=function(){ Console.log ("div")} p.onmouseover=function(){console.log("p")} // Bubble stage div.onmouseEnter =function(){console.log("div") } p.onmouseEnter =function(){console.log("p")} // Capture phaseCopy the code

The MouseEvent attributes mouseevent. altKey MouseEvent. CtrlKey MouseEvent. MetaKey MouseEvent. The return value is Boolean.

document.body.onclick=function(e){ e=e||window.event console.log("altKey:"+e.altKey); // Whether to press Alt console.log("ctrlKey:"+ e.trlkey); // Whether to press Ctrl console.log("metaKey:"+ e.metakey); // Whether to press the meta key console.log("shiftKey:"+ e.shifftkey); // Whether to press shift key}Copy the code

The mouseEvent. button property returns a number indicating which mouse key was pressed when the event occurred. 0 represents the left key, 1 represents the middle key, and 2 represents the right key

document.body.onmousedown=function(e){
    e=e||window.event
    console.log(e.button)
}
Copy the code

The MouseEvent. ClientX, MouseEvent. ClientY MouseEvent. ClientX property returns the horizontal coordinate of the mouse position relative to the top left corner of the browser window, The MouseEvent. ClientY property returns the vertical coordinate of the mouse position relative to the top left corner of the browser window, both of which are read-only properties.

document.body.onmousedown=function(e){
    e=e||window.event
    console.log(e.clientX,e.clientY)
}
Copy the code

OffsetX, the MouseEvent. OffsetY MouseEvent. OffsetX property returns the horizontal distance between the mouse position and the left edge of the event object, The mouseEvent. offsetY property returns the vertical distance between the mouse position and the left edge of the event object. Both properties are read-only.

Div. The onclick = function (e) {e = e | | window. The event console. The log (e.o ffsetX, e.o ffsetY) / / mouse event fires, the current mouse position from the top left corner of the destination node distance}Copy the code

The MouseEvent. PageX property returns the distance from the left edge of the document, and the MouseEvent. PageY property returns the distance from the top of the document. Both properties are read-only.

Document. The body. The onclick = function (e) {e = e | | window. The event console. The log (" pageY: "+ e.p ageY excuse) / / distance at the top of the document Console. log("clientY:"+ e.clienty) // Distance visible window top}Copy the code

The MouseEvent. MovementX property returns the horizontal displacement between the last Mousemove event and the current Mousemove event. The mouseEvent. movementY property returns the vertical distance between the last Mousemove event and the current Mousemove event. Both properties are read-only. Horizontal and vertical distance from the screen Mouse Wheel event The wheel event is DOMMouseScroll in Firefox and onMouseWheel in other browsers. Scroll up and down to save it in E.Dot ail Firefox: E.dot ail drop too oh scroll up returns a value greater than 0 scroll down returns a value less than 0 non Firefox: E.dot delta scroll up returns a value less than 0 scroll down returns a value greater than 0

Function wheelEvent (e) {e = e | | window. The event if (e.d etail) {/ / determine whether support e.d etail support that firefox is the if (e.d etail < 0) {the console. The log (" scroll up ") }else{console.log(" scroll down ")}else{console.log(" scroll down ")}else{console.log(" scroll down ")} }} document. Body. Onmousewheel = wheelEvent document. The body. The addEventListener (" mousewheel ", wheelEvent) / / than firefox Document. The body. The addEventListener (" DOMMouseScroll, "wheelEvent) / / firefoxCopy the code