如何在触发 mousedown 时添加鼠标悬停功能，并在触发 mouseup 时删除鼠标悬停功能 javascript

Question

window.addEventListener('mousedown' ,md ,true);
window.addEventListener('mouseup' ,mu,true);
    
function md(e) {
    var xcoor= e.screenX;
    var ycoor= e.screenY;
    console.log(xcoor+'md')
        
    window.addEventListener('mouseover' ,mo,true); 
    function mo(e){
        var x2coor= e.screenX;
        var y2coor= e.screenY;
        console.log(x2coor)
    }
}
    
function mu() {
    window.removeEventListener('mousedown',md,false)
}

Answer 1

It sounds like someone doesn't want a thousand mouse events firing off like a machine gun. It's neat to see the console display all of those coords so rapidly but it gets old fast. If you have the mouseup event remove the mousedown event handler, you'd have to write something overly complex to rebind it or reload the page. Kinda limiting.

The example below deals with two event handlers:

Event Handler	Event	Listener	Purpose
init(e)	mousedown + Ctrl key	window	Bind and unbind the mousemove event
evxy(e)	mousemove	window	Log: Mouse Events and XY coordinates

Basically the user can bind and unbind the mousemove event by clicking anywhere on the page with the mouse while holding down the Ctrl key (or ⌘ for Mac).

Details are commented in example

 // Bind the Window object to the mousedown event window.addEventListener('mousedown', init); // Define a flag let active = false; function init(e) { if (e.ctrlKey) { /* If the Ctrl key was pressed when there's a mouse click...*/ evxy(e); /* ...Run EVentXY...*/ if (!active) { /*...If the flag is false...*/ window.addEventListener('mousemove', evxy); /* ...Bind the mousemove event*/ active = true; /*...and set the flag to true */ } else { /* Otherwise...*/ window.removeEventListener('mousemove', evxy); /*Unbind the mousemove event*/ active = false; /*...and set the flag to false */ } } } function evxy(e) { let ev = e.type; let xy = [e.screenX, e.screenY]; console.log(ev + ': ' + xy); }

 .as-console-row::after { width: 0; font-size: 0; } .as-console-row-code { width: 100%; word-break: break-word; } .as-console-wrapper { min-height: 100% !important; max-width: 25%; margin-left: 75%; }