ホームページ > 記事 > ウェブフロントエンド > jQueryのChromeでmousemoveイベントのバグを完全に解決するにはどうすればよいですか?
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 サイトの他の関連記事を参照してください。