e.stopPropagation() в раскрывающемся списке "Выбрать окно"

Question

У меня есть div, редактируемый с установленной функцией размытия. Когда я нажимаю на поле выбора, вызывается размытие.

Могу ли я остановить распространение клика по выбору?

Я пытался http://jsfiddle.net/LZQSC/

$("#testInput").blur(function(){alert('blur');});

$('#testDropdown').bind('mousedown',function(e){
    //e.preventDefault();
   e.stopPropagation();
});

Является ли это возможным? Я пробовал разные методы, но ничего не получалось.

Answer 1

Вы можете отсоединить функцию размытия при выделении мыши и снова связать ее при отпускании мыши:

$("#testInput").blur(function(){alert('blur');});

$('#testDropdown').on('click',function(){
    // Do stuff
}).on('mouseenter', function() {
    $("#testInput").unbind('blur');
}).on('mouseleave', function() {
    $("#testInput").bind('blur', function() {
        alert('blur');
    });
});

http://jsfiddle.net/LZQSC/1/

Answer 2

Прежде всего:

На размытие / изменение фокуса не влияет остановка распространения клика. (Должны ли вы использовать любой из stopPropagation, stopImmediatePropagation или же preventDefault - который отключает только поведение по умолчанию щелчка)

С другой стороны:

Если вы хотите сохранить фокус на том элементе, на котором раньше был фокус, вам следует:

1. Помните, кто был в центре внимания при начале взаимодействия с избранным
2. Восстановите фокус, когда выбор сделан

Рабочий пример: http://jsfiddle.net/LZQSC/3/

$("#testInput").blur(function(){console.log('blur');});

(function(){
    // stores focused element reference
    var focusedElement;
    $('#testDropdown').on('mousedown', function(e){
            // on mousedown we get the focused element
            var el = $(':focus');
            // if this is other than the current select element 
            if(el.length > 0 && el[0] !== e.currentTarget){
                // save it in the var
                focusedElement = el;
            }
        }).change(function(e){
            console.log('changed');
            /* do stuff */
            // restore original focus
            console.log('setting focus on'+focusedElement.selector);
            focusedElement.focus();
    });
})();