ホームページ  >  記事  >  ウェブフロントエンド  >  jQueryのChromeでmousemoveイベントのバグを完全に解決するにはどうすればよいですか?

jQueryのChromeでmousemoveイベントのバグを完全に解決するにはどうすればよいですか?

黄舟
黄舟オリジナル
2017-06-28 10:41:042921ブラウズ

Chrome では、mousemove に関するバグがあります。
1. click や contextmenu がトリガーされたときなど、mouseup イベント がトリガーされると、mousemove イベントもトリガーされます。 2. contextmenu イベントが発生すると、mousedown イベントは、mousemove に置き換えられます。
私が現在考えている解決策は、
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");    
    }
})

を介して比較することです。これにより、click イベントのトリガーや、マウスの左ボタンをマウスアップしましたが、上記のコンテキストメニューによって引き起こされるマウス移動はまだうまく解決できません


完璧な解決策はありますか?あるいは、この状況を可能な限り回避するしかありません

<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");
})

jq を使用するということは、すべてのブラウザで .data() を使用することになります。これは考え方なので、自分で変えることができます。

また、要素がmousemoveにバインドされた後は、他のイベントをバインドしないでください。

最後に: リソースを大量に消費するため、mousemove は使用しないようにしてください。

マウスダウンの位置を比較することで移動操作かどうか確認できます


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 };};


以上がjQueryのChromeでmousemoveイベントのバグを完全に解決するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

声明:
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。