1

私はHtml5キャンバスとJavascriptイベントで少し実験をしました。残念ながら、特定のケースでは、javascriptクリックイベントが予期しない動作をします。

これは実験のフィドルです：http ：//jsfiddle.net/Rh4kP/10/

クリックすると、コンソールに出力が表示されないことがよくあります。私はこれをGoogleChrome22.0.1とFirefox14.0.1で観察しました

さらに奇妙なことに、次のような「フリップ」行の1つにコメントすると：

document.getElementById(hiddenCanvas).style.display = 'block';
// document.getElementById(displayedCanvas).style.display = 'none';

また

// document.getElementById(hiddenCanvas).style.display = 'block';
document.getElementById(displayedCanvas).style.display = 'none';

クリックイベントは適切に機能します！

4

1 に答える 1

4

Mozilla Development Networkによると、クリック イベントの定義は次のとおりです。

ユーザーが要素をクリックすると、クリックイベントが発生します。クリック イベントは、mousedown および mouseupイベントの後に発生します。[鉱山を強調]

つまり、'flip' イベントが発生してコンテンツをすばやく変更しているため、mousedown イベントと mouseup イベントが同じ DOM 要素で発生していないため、クリックは発生しません。

この例(あなたのものから派生したもの) を試して、これが実際に行われていることを確認してください。イベントが発生すると、 mousedownclickイベントと mouseup イベントが同じ DOM 要素で発生することがわかります。しかし、それが起こらないのは、別の DOM 要素で mousedown と mouseup が起こっているからです。実行する別のテストは、フリップフロップを遅くすることです。タイムアウトが非常に遅いと、この問題が発生する可能性が低くなります (可能性はまだありますが、使用することをお勧めしmouseupます) 。

代わりに、'mouseup' イベントだけを使用してみてください。あなたの例でテストしましたが、一貫して機能しているように見えました。

DOM 要素を削除した場合、その要素で開始されたイベントはバブルし続けますか? を参照してください。詳細については質問してください。

于 2012-10-22T19:00:51.283 に答える