4

div の mousedown イベント ハンドラーでは、別の新しい div が作成され、本文に追加されます。
この新しい div はposition:fixed、position:absolute幅 100%、高さ 100% です。したがって、マウスダウンイベントをトリガーしたソース div をすぐにカバーします。現在、最新の Google Chrome (v30)、最新の Firefox (v24)、Opera v12.16、および古い Safari v5.1.1 (Windows の場合) では、マウスダウン イベントの後、本体に接続されたイベント リスナーでクリック イベントが発生しません。 . Internet Explorer (9 と 10 の両方)
のみが、後で本文のクリック イベントを発生させます。なんで？そして、これをどのように防ぐことができますか？これは実際には IE のバグですか?

HTML:

<div class="clickme">Click me</div>

CSS:

.clickme {
    background-color: #BBB;
}

.overlay {
    position: fixed; /* or absolute */
    left: 0;
    top: 0;
    height: 100%;
    width: 100%;
    background-color: #000;
}

JavaScript:

$(document).on('click', function(event) {
    console.log('body click');
});

$('.clickme').on('mousedown', function(event) {
    console.log('div mousedown');
    
    var mask = $('<div></div>');
    mask.attr('class', 'overlay');
    mask.appendTo('body');
});

いくつかの追加コメントを含む例を次に示します: http://jsfiddle.net/Fh4sK/5/

「クリックしてください」divをクリックした後、のみ

div mousedown

コンソールに書き込む必要がありますが、Internet Explorer では実際には

div mousedown
body click

どんな助けにも感謝します！ありがとう！

編集1：

クリック イベントをトリガーする条件を説明しているリソースをいくつか見つけました。

http://www.quirksmode.org/dom/events/click.html :
「クリック - 同じ要素で mousedown イベントと mouseup イベントが発生したときに発生します。」

http://www.w3.org/TR/DOM-Level-3-Events/#events-mouseevent-event-order
"...一般に、関連するマウスダウンおよびマウスアップのイベントターゲットがevents は、mouseout または mouseleave イベントが介在しない同じ要素であり、関連する mousedown および mouseup イベントのイベント ターゲットが異なる場合、最も近い共通の祖先で click イベントと dblclick イベントを発生させる必要があります。"

現在の「正しい」動作が実際にどうあるべきか、100% 確信が持てません (おそらく IE がそれを正しく処理する唯一のブラウザでしょうか?)。最後の文から、body は両方の div 要素の「最も近い共通の祖先」であるため、body でクリック イベントを発生させるのが正しいようです。上記の参照された w3.org ページには、要素が削除された場合の動作を説明する他のステートメントがいくつかありますが、要素が削除されず、他の要素で覆われているため、これがここに当てはまるかどうかはわかりません。

編集2：

@Evan は、Microsoft に説明されている動作を削除するよう求めるバグ レポートを開きました: https://connect.microsoft.com/IE/feedback/details/809003/unexpected-click-event-triggered-when-the-elements-below-cursor- at-mousedown-and-mouseup-events-are-different

編集3：

Internet Explorer に加えて、Google Chrome も最近同じ動作をするようになりました: https://code.google.com/p/chromium/issues/detail?id=484655

4

4 に答える 4

2

私もこの問題にぶつかりました。この問題を解決するために jQuery プラグインを作成し、GitHub に置くことにしました。

すべてここにあります。フィードバックは大歓迎です: https://github.com/louisameline/XClick

@mkurz : W3 ディレクティブを見つけてくれてありがとう。多くの時間を節約できました。@vitalets : 私はあなたのように select2 を使用しているため、この問題を解決しました (あなたがこのトピックに導いてくれました)。select2 リポジトリをフォークして、これに興味のある人にメッセージを残します。

Microsoft の人たちにそれを見てもらい、できればあの煩わしいクリック動作を変えてもらうことができるかどうか見てみよう。

于 2013-11-18T16:30:31.570 に答える
1

私もそのような行動に苦労しました。フィドルを変更して、動的に作成されたオーバーレイですべてのマウス イベントがどのようにトリガーされるかを調べました。

http://jsfiddle.net/Fh4sK/9/

したがって、mousedownマウスダウンが発生した同じ場所にある要素のハンドラーがオーバーレイを表示する場合:
Chrome、FF:

  1. mousedown要素でトリガー
  2. mouseupオーバーレイでトリガー
  3. clickトリガーしない

いいえ:

  1. mousedown要素でトリガー
  2. mouseupオーバーレイでトリガー
  3. click BODY(!) でトリガー

マウスダウンでマスクを非表示にした場合と同じ動作。

この問題は、モーダル、マスク、オーバーレイなどで IE で奇妙なことにつながる可能性があります。

興味深いこと：mouseup代わりにオーバーレイを表示すると、mousedownすべてが機能します

私が見つけた解決策mouseupは、の代わりに使用することですmousedown。これらのイベントは両方とも の前に
トリガーされるため、正常に説明できません。 その場合、すべてのマウス イベントが要素でトリガーされます。 click

http://jsfiddle.net/Fh4sK/11/

  1. mousedown要素でトリガー
  2. mouseup要素でトリガー
  3. click要素でトリガー

お役に立てれば。

于 2013-11-03T17:49:18.310 に答える
0

クリックイベントのバブリングを止めたい場合は、これを試してください：（テストするIEがありません）

$(document).on('click', function(event) {
    console.log('body click');
});

$('.clickme').on('mousedown', function(event) {
    console.log('div mousedown');
});

$('.clickme').on('click', function(event) {
  event.stopPropagation();
});

クリック、マウスダウン、およびマウスアップは、独立したさまざまなイベントです。 ここに同様の質問があります

于 2013-10-07T14:08:05.520 に答える
0

ドキュメントのクリックをターゲットでフィルタリングして、その div のクリックを除外できます。

$(document).on('click', function(event) {
    if(!$(event.target).hasClass('clickme')) {
        console.log('body click');  
    }
});
于 2013-10-07T01:53:28.483 に答える