web-dev-qa-db-fra.com

Les événements Chrome mousedown et mouseup ne fonctionnent plus, les autres navigateurs command bien

À compter d'aujourd'hui (ou hier, je ne l'avais pas remarqué à l'époque), les événements Mousedown et MousUp ne fonctionnent plus. Je suis sur la version de Chrome 55.0.2883.95 (64 bits). Safari et FireFox fonctionnent bien (je suis sur un ordinateur Mac).

Voici le code:

document.getElementById("floorplan-backdrop-rect").addEventListener('mousedown', function(ev) {
    o.clickDown(ev);
}, false);

document.getElementById("floorplan-backdrop-rect").addEventListener('mouseup', function(ev) {
    o.clickUp(ev);
}, false);

Y a-t-il eu des changements d'API concernant les événements de souris que nous avons manqués? Chrome ne lance aucun avertissement lors de l'enregistrement des événements. Les retouches et les retouches semblent également échouer (en mode iPad émulé dans les outils de développement)

EDIT: juste après avoir changé d’onglet, ou lors du redimensionnement de la fenêtre, les événements semblent se manifester pendant un court instant. Puis ils s’arrêtent à nouveau ..

Cordialement

javascriptgoogle-chromemouseevent
7
Wouter Coebergh

EDIT (voir l’ancienne réponse ci-dessous):

Chrome a supprimé les événements de souris au profit des événements de pointeur à partir de la version 55.

Pourquoi (W3C):

Aujourd'hui, la plupart du contenu [HTML5] est utilisé avec et/ou conçu pour la saisie à la souris . Ceux qui traitent les entrées de manière personnalisée attribuent généralement le code [DOM-LEVEL-3-EVENTS] à la souris. De nos jours, les appareils informatiques les plus récents Intègrent d’autres formes de saisie, notamment des écrans tactiles, une saisie au stylo , Etc. . Cependant, cette approche entraîne souvent Une duplication inutile de la logique et une surcharge de traitement des événements lorsque Ajoute la prise en charge d'un nouveau type d'entrée. Cela crée souvent un problème de compatibilité Lorsque le contenu est écrit avec un seul type de périphérique À l'esprit. De plus, pour assurer la compatibilité avec le contenu basé sur la souris Existant, la plupart des agents utilisateurs déclenchent des événements de souris pour tous les types d'entrée . Cela rend ambigu si un événement de souris représente un périphérique de souris Réel ou est produit à partir d'un autre type d'entrée pour la compatibilité de , ce qui rend difficile le codage simultané des deux types de périphériques . .

Code utilisable:

Pour ajouter différents écouteurs d'événement pour le "même" événement, utilisez le code suivant:

// Put these in seperate function instead of anonymous ones
// since you will need them later to deregister the event
function onPointerDown(event){ /** Do stuff here **/ }
function onPointerHover(event){ /** Do stuff here **/ }
function onPointerMove(event){ /** Do stuff here **/ }
function onPointerUp(event){ /** Do stuff here **/ }

// Add event listeners
if (isEventSupported("onpointerdown")) {
    domElement.addEventListener("pointerdown", onPointerDown, false);
    domElement.addEventListener("pointermove", onPointerHover, false);
    domElement.addEventListener("pointermove", onPointerMove, false);
    domElement.addEventListener("pointerup", onPointerUp, false);
} else if (isEventSupported("ontouchstart")) {
    domElement.addEventListener("touchstart", onPointerDown, false);
    domElement.addEventListener("touchmove", onPointerHover, false);
    domElement.addEventListener("touchmove", onPointerMove, false);
    domElement.addEventListener("touchend", onPointerUp, false);
} else if (isEventSupported("onmousedown")) {
    domElement.addEventListener("mousedown", onPointerDown, false);
    domElement.addEventListener("mousemove", onPointerHover, false);
    domElement.addEventListener("mousemove", onPointerMove, false);
    domElement.addEventListener("mouseup", onPointerUp, false);
}

// Remove event listeners
if (isEventSupported("onpointerdown")) {
    domElement.removeEventListener("pointerdown", onPointerDown, false);
    domElement.removeEventListener("pointermove", onPointerHover, false);
    domElement.removeEventListener("pointermove", onPointerMove, false);
    domElement.removeEventListener("pointerup", onPointerUp, false);
} else if (isEventSupported("ontouchstart")) {
    domElement.removeEventListener("touchstart", onPointerDown, false);
    domElement.removeEventListener("touchmove", onPointerHover, false);
    domElement.removeEventListener("touchmove", onPointerMove, false);
    domElement.removeEventListener("touchend", onPointerUp, false);
} else if (isEventSupported("onmousedown")) {
    domElement.removeEventListener("mousedown", onPointerDown, false);
    domElement.removeEventListener("mousemove", onPointerHover, false);
    domElement.removeEventListener("mousemove", onPointerMove, false);
    domElement.removeEventListener("mouseup", onPointerUp, false);
}

Références:

Ancienne réponse:

Ressemble à des événements de souris supprimés chromés au profit d’événements de pointeur à partir de la version 55.

Changer le code original en suivant corrige notre problème pour chrome:

note: l'utilisation de cette option n'est pas recommandée car nous ne pouvons pas désenregistrer les écouteurs de cette manière, voir le nouvel exemple ci-dessous.

document.getElementById("some-id").addEventListener('pointerdown', function(ev) {
    o.clickDown(ev);
}, false);

document.getElementById("some-id").addEventListener('pointerup', function(ev) {
    o.clickUp(ev);
}, false);

Notez que si vous avez des vérifications supplémentaires sur le type d’événement, comme nous, le type est également passé de 'mouseup' à 'pointerup' et de 'mousedown' à 'pointerdown'.

Vous pouvez lire l'article sur la mise à jour ici:

https://developers.google.com/web/updates/2016/10/pointer-events

9
Wouter Coebergh

Pour ajouter à la solution @WouterCoebergh. Vous devez vous rappeler d'ajouter une solution de secours pour l'ancien événement. Cela peut être fait de la manière suivante, tirée de la même source [1].

var mousedownEvent = function(ev) {
  o.clickDown(ev);
}

var Elm = document.getElementById("floorplan-backdrop-rect");

if (window.PointerEvent) {
  Elm.addEventListener('pointerdown', mousedownEvent);
} else {
  Elm.addEventListener('mousedown', mousedownEvent);
}

[1]: Blog des développeurs Google

1
MrGrigri