再び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
domElement.addEventListener("mousedown", onPointerDown);
domElement.addEventListener("pointerdown", onPointerDown);
domElement.addEventListener("touchstart", onPointerDown);
domElement.addEventListener("mousemove", onPointerHover);
domElement.addEventListener("pointermove", onPointerHover);
domElement.addEventListener("touchmove", onPointerHover);
domElement.addEventListener("mousemove", onPointerMove);
domElement.addEventListener("pointermove", onPointerMove);
domElement.addEventListener("touchmove", onPointerMove);
domElement.addEventListener("mouseup", onPointerUp);
domElement.addEventListener("pointerup", onPointerUp);
domElement.addEventListener("touchend", onPointerUp);
// Remove event listeners
domElement.removeEventListener("mousedown", onPointerDown);
domElement.removeEventListener("pointerdown", onPointerDown);
domElement.removeEventListener("touchstart", onPointerDown);
domElement.removeEventListener("mousemove", onPointerHover);
domElement.removeEventListener("pointermove", onPointerHover);
domElement.removeEventListener("touchmove", onPointerHover);
domElement.removeEventListener("mousemove", onPointerMove);
domElement.removeEventListener("pointermove", onPointerMove);
domElement.removeEventListener("touchmove", onPointerMove);
domElement.removeEventListener("mouseup", onPointerUp);
domElement.removeEventListener("pointerup", onPointerUp);
domElement.removeEventListener("touchend", onPointerUp);
参考文献:
旧答え:
クロムは、バージョン55とアップからポインタイベントの賛成でマウスイベントを捨てたように見えます。
クロムについては、以下の固定我々の問題に元のコードを変更する:
注:これは、私たちはこのようにリスナーの登録を解除することはできませんので、お勧めしません使用して、以下の新しい例を参照してください。あなたがここに更新の記事をよく読んですることができますが、イベントタイプの追加チェックを持っている場合は、私たちが行ったように、タイプも'mousedown'
から'pointerdown'
に'pointerup'
へ'mouseup'
から変更していることをは
document.getElementById("some-id").addEventListener('pointerdown', function(ev) {
o.clickDown(ev);
}, false);
document.getElementById("some-id").addEventListener('pointerup', function(ev) {
o.clickUp(ev);
}, false);
注意:@WouterCoeberghソリューションに追加するには
https://developers.google.com/web/updates/2016/10/pointer-events