web-dev-qa-db-ja.com

Chrome mousedownおよびmouseupイベントが機能しなくなり、他のブラウザで問題ありません

今日（または昨日、そのことに気づかなかった）現在、mousedownイベントとmouseupイベントは機能していません。 Chromeバージョン55.0.2883.95（64ビット）です。SafariとFireFoxは正常に動作しています（Macコンピューターを使用しています）。

これがコードです：

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

見逃したマウスイベントに関するAPIの変更はありましたか？ Chromeイベントの登録時に警告もスローされません。タッチダウンイベントとタッチアップイベントも失敗するようです（開発者ツールのエミュレートされたiPadモード）。

編集：タブを変更した直後、またはウィンドウのサイズを変更すると、イベントがしばらくの間表示され、その後再び停止します。

よろしく

javascriptgoogle-chromemouseevent
11
Wouter Coebergh

EDIT（下の古い回答を参照）：

Chromeは、バージョン55以降のポインターイベントを優先して、マウスイベントを破棄しました。

なぜ（W3C）：

現在、ほとんどの[HTML5]コンテンツは、マウス入力用に使用されているか、マウス入力用に設計されています。カスタムの方法で入力を処理するものは、通常[DOM-LEVEL-3-EVENTS]マウスイベントにコーディングします。ただし、今日の新しいコンピューティングデバイスには、タッチスクリーン、ペン入力など、他の入力形式が組み込まれています。これらの入力形式を個別に処理するために、イベントタイプが提案されています。ただし、この方法では、新しい入力タイプのサポートを追加するときに、ロジックとイベント処理のオーバーヘッドが不必要に重複することがよくあります。これは、コンテンツが1つのデバイスタイプのみを考慮して記述されている場合に、互換性の問題を引き起こすことがよくあります。さらに、既存のマウスベースのコンテンツとの互換性のために、ほとんどのユーザーエージェントはすべての入力タイプに対してマウスイベントを発生させます。これにより、マウスイベントが実際のマウスデバイスを表すのか、互換性のために別の入力タイプから生成されるのかが不明確になり、両方のデバイスタイプに同時にコーディングすることが難しくなります。

使用可能なコード：

「同じ」イベントに異なるイベントリスナーを追加するには、次のコードを使用します。

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

参照：

古い答え：

chrome破棄されたマウスイベントのように見えます。バージョン55以降のポインタイベントが優先されます。

元のコードを次のように変更すると、Chromeに関する問題が修正されました。

注：このようにリスナーを登録解除できないため、これを使用することはお勧めしません。以下の新しい例を参照してください。

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

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

私たちが行ったように、イベントタイプに追加のチェックがある場合、タイプも'mouseup'から'pointerup'に、および'mousedown'から'pointerdown'に変更されたことに注意してください。

あなたはここで更新記事を読むことができます：

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

12
Wouter Coebergh

@WouterCoeberghソリューションに追加します。古いイベントのフォールバックを追加することを忘れないでください。これは、同じ[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]： Google Developers Blog

1
MrGrigri