JavaScript mouse events, coordinate axes, positioning, clientXY, offsetXY, layerXY, pageXY, screenXY

---

Event class for MouseEvent

serial number	event	describe
1	mousedown	mouse down
2	mouseup	mouse release
3	click	left click
4	dblclick	left double click
5	mousemove	mouse movement
6	mouseover	mouse over
7	mouseout	mouse out
8	mouseenter	mouse enter
9	mouseleave	mouse out
10	contextmenu	right click menu

The execution sequence is mousedown=> mouseup=> click
mouseoverand mouseoutsub-elements will also trigger, which can be triggered by bubbling
mouseenterand mouseleavetriggered by the listening object, preventing bubbling

---

Block the default events of the mouse

event.preventDefault();
event.returnValue = false;// IE8and the following compatible writing
return false;// IECompatible writing, only used for onevents to prevent default events

---

Remove the right-click menu

document.body.addEventListener("contextmenu", clickHandler);

function clickHandler(event) {
    
    
	// 阻止事件默认行为
	event.preventDefault();
	console.log(event.type);
}

---

Prevent images from being dragged by default

let img = document.querySelector("img");
img.addEventListener("mousedown", mouseHandler);

function mouseHandler(event) {
    
    
    event.preventDefault();
}

---

Prevent text dragging and selection

document.body.addEventListener("mousedown", mouseHandler);

function mouseHandler(event){
    
    
    event.preventDefault();
}

---

Prevent form submission and reset

let bn = document.querySelector("[type=submit]");
bn.addEventListener("click", clickHandler);

function clickHandler(event){
    
    
	event.preventDefault();
}

Or write to the form

let form = document.querySelector("form");
form.addEventListener("submit", submitHandler);

function submitHandler(event){
    
    
	event.preventDefault();
	// IE8 及以下兼容写法
	// event.returnValue = false;
} 

---

Print out the contents of the MouseEvent object

document.body.addEventListener("mousedown", clickHandler);

function clickHandler(event){
     
     
	console.log(event);
}

altKey, ctrlKey, shiftKey, metaKeywhether the button is clicked
button, buttons, whichused to determine which button of the mouse is operated,
the value corresponding to the left button 0, 1, 1
the value corresponding to the middle button 1, , 4the 2
value corresponding to the right button 2, 2, 3
timeStampthe time from the page opening to the trigger event

---

clientX and clientY with x and y

clientXclientYSame as and , xboth yare client area coordinates, referring to the coordinates of the mouse, starting from the upper left corner of the browser display area, xand yare supported by new browsers.

---

offsetXY

offsetX, offsetYfor the upper-left coordinates of the target element (event.target).

---

layerXY

layerX, layerYlook up to the upper left corner of the parent element with positioning attributes (if it has positioning attributes, it is relative to itself), if there is none, it is relative to the upper bodyleft corner.

---

When neither the element nor its parent has a positioning attribute, the bodyupper left corner of is used as the origin

---

When the parent of the element has a positioning attribute, the upper left corner of the parent is used as the origin

---

When the element itself has a positioning attribute, use its upper left corner as the origin

---

pageXY

pageX, pageYthe distance from the upper left corner of the page.

---

screenXY

screenX, screenYrelative to the upper left corner of the screen.

---

Summarize

clientXSame clientYas and , starting from the upper left corner of the browser display area, referring to the coordinates of the mouse. and is a product of new browser support. and for the upper-left coordinates of the target element, from the start. And go up to find the upper left corner of the parent element with positioning attributes (if it has positioning attributes, it is relative to itself), if there is none, it is relative to the upper left corner. The distance from the upper left corner of the relative page. and relative to the upper left corner of the screen.xyxy
offsetXoffsetYpadding
layerXlayerYbody
pageXpageY
screenXscreenY