3

IE でダブルクリックの問題を発見しました。

以下は私のHTMLです：

<div id="test">Hello World!</div>

そして私のjQuery：

$('#test').bind('dblclick', function (event) {
    event.stopPropagation();
    $(this).css({'background-color': 'red'});
});

IE で、次の操作を行います。

  1. DIV の外では、マウスダウン → マウスアップ → マウスダウン → マウスダウンをホールドします。
  2. 次に、マウスを押したまま、マウスを DIV に移動し、マウスを上に動かします。

ダブルクリック イベントが DIV で発生したかのように、DIV が赤くなります。

IE では、ダブルクリックの両方でダブルクリック イベントが発生するようです：</p>

  1. DIV の STARTS と ENDS
  2. DIV の外側で開始し、DIV の内側で終了します。

ただし、FF/Chrome では、DIV 内で STARTS と ENDS をダブルクリックしたときにのみイベントが発生します。

これに対する公式の説明は何ですか？また、IE のダブルクリックを FF/Chrome のダブルクリックのように動作させるにはどうすればよいですか?

4

2 に答える 2

5

(on)dblclick イベントはネイティブの JavaScript イベントであり、jquery のイベントではありません

Dblclick イベントはブラウザー間で一貫性がありません。このチケットを参照してください 3 年前ですが、何らかの形でまだ有効です : http://bugs.jquery.com/ticket/7876あなたはそれを指摘しました、まだいくつかのバグがあります。

回避策として、dblclick イベントの代わりに次のスニペットを使用できます。

カスタム dblclick を使用したデモ

$('#test').on('click', function(event){
    var t = this;
    if (!t.clicks) t.clicks = 0;
         ++t.clicks;
         if (t.clicks === 2) {
             t.clicks = 0;
             //here the kind of dclclick is fired ...
             $(t).css({'background-color' : "red"});
         }
         setTimeout(function () {
             t.clicks = 0
         }, 500);//duration value can be change depending of your wishes

});

他の回避策は、次のように、mousedown/mouseenter/mouseleave (ホバー) ハンドラーで dblclick イベントをバインド/バインド解除することです。

mousedown/mouseenter/mouseleave によるデモ

$('#test').hover(function () {
    $(this).on('mousedown.cust', function () {
        $(this).on('dblclick.cust', function () {
            $(this).css({
                'background-color': "red"
            });
        });
    });
}, function () {
    $(this).off('mousedown.cust dblclick.cust');
});
于 2013-07-04T10:57:38.623 に答える
0

ここにフィドルがあります。jQuerydblclickは FF と IE9 の両方で動作します。テスト済み:「イベントは、DIV 内でダブルクリックが開始および終了したときにのみ発生します」

$("#test").dblclick(function(event) {
  event.stopPropagation();
  $(this).css({'background-color': 'red'});
});
于 2015-04-24T20:00:01.250 に答える