двойной щелчок с помощью IE

Я обнаружил проблему двойного щелчка в 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 событие двойного щелчка запускается как при двойном щелчке:

  1. НАЧИНАЕТСЯ и ЗАКАНЧИВАЕТСЯ в DIV
  2. НАЧИНАЕТСЯ вне DIV и ЗАКАНЧИВАЕТСЯ внутри DIV.

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

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


person Anocc Linn    schedule 01.07.2013    source источник
comment
Не уверен, почему вы удалили скрипку, которую я добавил. Я сомневаюсь, что кто-то поможет вам, не имея возможности воспроизвести проблему, для чего и нужна скрипка. В любом случае, я добавлю его в комментарий, где он может помочь другим и где вы не сможете его удалить: jsfiddle.net /fH2z3   -  person Derek Henderson    schedule 01.07.2013
comment
Кстати, это также ведет себя в IE10.   -  person Derek Henderson    schedule 01.07.2013
comment
Извините. Поскольку мой родной язык не английский, и я впервые использую stackoverflow. Я много раз редактировал содержимое. Я не ожидал, что кто-то ответит так быстро. Извините за беспокойство. Спасибо. много за ваш ответ! :)   -  person Anocc Linn    schedule 01.07.2013
comment
Кажется, что IE запускает событие двойного щелчка, когда второе наведение мыши происходит над целью, независимо от того, где произошло первое наведение мыши, тогда как в других браузерах как начальное наведение мыши, так и второе наведение мыши должны быть внутри цели. Я не смог найти никакой документации, почему, и пока не знаю, как это исправить, чтобы поведение было последовательным.   -  person Derek Henderson    schedule 01.07.2013
comment
Еще раз большое спасибо. :)   -  person Anocc Linn    schedule 01.07.2013


Ответы (2)


Событие (on)dblclick — это собственное событие JavaScript, а не событие jquery

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

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

DEMO с пользовательским двойным кликом

$('#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

});

Другим обходным путем может быть привязка/отвязка события dblclick для обработчиков mousedown/mouseenter/mouseleave (hover), например:

ДЕМО с помощью 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');
});
person A. Wolff    schedule 04.07.2013
comment
Я использую здесь первый фрагмент кода, но IE выдает ошибку о том, что член не найден. Есть какие нибудь идеи как это починить? - person seasick; 18.11.2014

Вот скрипка. jQuery dblclick у меня работает как в FF, так и в IE9. Протестировано: «событие запускается только тогда, когда двойной щелчок НАЧИНАЕТСЯ и ЗАКАНЧИВАЕТСЯ внутри DIV»

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