Предотвращение события двойного щелчка на нижнем уровне при двойном щелчке \ скрыть более высокий уровень

Question

Итак, у меня есть форма, где двойной щелчок по полю вызывает настраиваемое модальное окно. Кнопки для «Сохранить» и «Отмена» в модальном окне имеют события «щелчка», которые вызывают hide() на уровне модального окна. Однако некоторые из наших пользователей, естественно, дважды щелкают вещи. Двойной щелчок на кнопках сохранения или отмены запускает событие клика и скрывает модальное окно, но также вызывает событие двойного щелчка поля, которое находилось под модальным окном, в результате чего модальное окно отображалось снова. Я знаю, используя setTimeOut(), и задержка hide() модального окна решит проблему, но я предпочитаю не ухудшать отзывчивость интерфейса, если это возможно. Какие-либо предложения?

Вот скрипка, которая обычно объясняет проблему. https://jsfiddle.net/e51rc24j/4/

$(function() { 
    $(".field").on("dblclick", function(ev) { 
    $(".hoverlayer").show(); 
    }); 

    $(".hoverlayer").on("click", function(ev) { 
    var thisLayer = this; 
    $(thisLayer).hide(); 
    /* PUTTING IN DELAY ON HIDE SOLVES PROBLEM BUT I PREFER TO NOT DELAY UI RESPONSIVENESS IF POSSIBLE 
    setTimeout(function(){ 
     $(thisLayer).hide(); 
    }, 300);*/ 
    }); 
}); 

Answer 1

Сначала я думал, что проблема была распространение, поэтому я добавил stopPropagation к вашему мероприятию. Но потом я узнал, что это не двойной клик, который распространяется. Проблема в том, что это совсем другое, а именно, что ВТОРОЙ клик (двойной щелчок, чтобы закрыть черный накладной) LANDS в поле ввода снова, что снова вызывает событие двойного щелчка в поле ввода.

Итак, все, что вам нужно сделать, - это переместить кнопки SAVE и CANCEL, чтобы они не находились непосредственно над полем ввода.

Я сделал небольшие изменения в вашем jsfiddle для иллюстрации: https://jsfiddle.net/e51rc24j/6/

Если вы дважды щелкните на «ПРОБЛЕМА», модальный черный ДИВ откроется снова, потому что ваш второй щелчок земли внутри <input> текстового поля , Однако, если вы дважды щелкните в другом месте в черном div («Не проблема»), он не откроется.