Comment résoudre parfaitement le bug de l'événement mousemove sous Chrome dans jQuery ?

Il y a un bug concernant mousemove dans Chrome :
1 Lorsque l'événement mouseup est déclenché, y compris lorsque le clic et le menu contextuel sont déclenchés, l'événement mousemove sera également déclenché
2. . Ce qui est encore plus étrange, c'est que lorsque vous déclenchez continuellement des événements de menu contextuel, l'événement mousedown sera remplacé par mousemove
Une solution à laquelle je pense actuellement est de comparer via timestamp :

var body = document.querySelector("h1");
var timeStamp;

body.addEventListener("mousedown", function (e) {
    console.log("mouse down");
}, false);

body.addEventListener("mouseup", function (e) {
    console.log("mouse up");
    timeStamp = e.timeStamp;
})

body.addEventListener("mousemove", function (e) {
    if (!timeStamp || ( e.timeStamp - timeStamp > 10)) {
        console.log("mouse move");    
    }
})

<. 🎜>Cela peut éviter de déclencher l'événement de clic ou le déplacement de la souris provoqué par le bouton gauche de la souris, mais cela ne peut toujours pas résoudre le déplacement de la souris provoqué par le menu contextuel décrit ci-dessus

Existe-t-il une solution parfaite ? Ou nous ne pouvons qu'éviter cette situation autant que possible

<input type="text" id="a1" />

$("#a1").mousemove(function(){
	if ($(this).data("x") === event.pageX && $(this).data("y") === event.pageY) {
		return false;
	}
	$(this).data({"x":event.pageX, "y":event.pageY});
	$(this).after("1");
})

Le but de l'utilisation de jq est d'utiliser .data() dans tous les navigateurs. C’est cette façon de penser, vous pouvez la changer vous-même.

De plus, une fois qu'un élément est lié au déplacement de la souris, ne liez pas d'autres événements.

Enfin : essayez de ne pas utiliser mousemove, cela consomme trop de ressources.

Vous pouvez confirmer s'il s'agit d'une opération de déplacement en comparant la position de la souris

document.onmousemove = function(e) {　　
// 不是move操作　　if (x === mouseDown.x && y === mouseDown.y) {
        return false;
    }};
document.onmousedown = function (e) {　　
mouseDown = { x: e.clientX, y: e.clientY };};

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!