Skip navigation

JavaScript egérkezelés

Témakörök

Interakciót, színtér bejárást egér segítségével is végezhetünk. A JavaScript környezet lehetőséget biztosít, hogy egérgombok lenyomásakor, illetve a mutató mozgatásakor saját függvényünket meghívathassuk.

Eseménykezelők

Egy dokumentumhoz kapcsolódóan többek között az alábbi eseményekhez kapcsolódhatunk.

Bal egérgomb lenyomása esetén az események generálódási sorrendje:

  • mousedown
  • mouseup
  • click

A jobb egérgomb lenyomása esetén az események generálódási sorrendje:

  • mousedown
  • mouseup
  • contextmenu

Egér mozgásának követése:

  • mousemove

Érintőképernyőkön az érintés és mozgatás az alábbi eseményeken keresztül kezelhető:

  • touchstart
  • touchmove
  • touchend
  • touchcancel

Az eseménykezelőt a dokumentumhoz adhatjuk hozzá, például az alábbi módon.

// Egérmozgás kezelése
document.addEventListener('mousemove', onDocumentMouseMove, false);
// Eseménykezelés mobil eszközökön
document.addEventListener('touchstart', onDocumentTouchStart, false);
document.addEventListener('touchmove', onDocumentTouchMove, false);

Az eseménykezelő egy esemény objektumot kap, ami tartalmazza a kattintás kliens ablakbeli koordinátáit.

function onDocumentMouseMove(e) {
    mouseX = e.clientX - windowHalfX;
    mouseY = e.clientY - windowHalfY;
    //console.log('x=' + mouseX + '; y=' + mouseY );
}

Érintőképernyő tapintáskor egy tömböt kapunk, mivel egyszerre több érintés történhet a kijelzőn.

function onDocumentTouchStart(e) {
    if (e.touches.length === 1) {
        //console.log( 'onDocumentTouchStart' );
        e.preventDefault();
        mouseX = e.touches[0].pageX - windowHalfX;
        mouseY = e.touches[0].pageY - windowHalfY;
    }
}