2016-12-16 1 views
3

今日(または昨日は気付かなかった)mousedownとmouseupイベントは機能しなくなりました。私はChromeバージョン55.0.2883.95(64ビット版)です。 SafariとFireFoxは正常に動作しています(私はMacコンピュータ上にいます)。ここでChromeのマウス操作とマウスアップのイベントは機能しなくなりました。他のブラウザは問題ありません。

はコードです:

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モードで)

編集:タブを変更した直後、またはウィンドウのサイズを変更すると、しばらくの間イベントが発生しているようです。その後、彼らは...

よろしく

答えて

7

再び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

1

。古いイベントのフォールバックを追加することを忘れないでください。これは、同じ[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

関連する問題