двойной щелчок, используя IE

Question

Я обнаружил проблему с двойным щелчком в IE.

Ниже мой HTML:

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

И мой JQuery:

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

В IE, выполните следующие действия:

1. Вне DIV, мышь вниз → мыши вверх → мыши вниз → HOLD мыши вниз.
2. Затем, удерживая мышь, переместите мышь в DIV и наведите курсор мыши вверх.

DIV становится красным, как если бы событие двойного щелчка происходило в DIV.

Кажется, что в IE двойной щелчок событие вызывается как при двойном щелчке:

1. начинается и заканчивается в DIV
2. STARTS вне DIV и заканчивается внутри DIV.

Тем не менее, в FF/Chrome событие запускается только при двойном щелчке НАЧАТЬ и ЗАВЕРШИТЬСЯ внутри DIV.

Какое официальное объяснение для этого? И как я могу заставить двойные клики IE вести себя как двойные щелчки FF/Chrome?

Answer 1

(на) событиях DblClick является уроженец событий JavaScript, не событиечрезвычайная JQuery в

DblClick события не соответствуют во всех браузерах, увидеть этот билет 3-х лет, но до сих пор действующий в некотором роде: http://bugs.jquery.com/ticket/7876 даже теперь последовательность в IE10 такая же, как FF/Chrome/Safari, но, как вы ее заметили, все еще есть некоторые ошибки.

В качестве обходного пути, вы можете использовать этот фрагмент вместо события DblClick:

DEMO with custom 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 

}); 

Другим обходной путь может быть, чтобы связать/UNBIND событие DblClick на MouseDown/MouseEnter/MouseLeave (парения) обработчики, как что:

DEMO with 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'); 
}); 

Answer 2

Вот fiddle. jQuery's dblclick работает для меня как на FF, так и на IE9. Протестировано: «событие запускается только при двойном щелчке« СТАРТЫ И НАЧАЛО внутри DIV »

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