javascript - e.stopPropagation() 在选择框下拉单击

Question

我有一个带有模糊功能集的可编辑 div。当我单击选择框时，会调用模糊。

我可以停止传播点击选择吗？

我试过 http://jsfiddle.net/LZQSC/

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

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

可能吗？我尝试了不同的方法，但没有任何效果。

Answer 1

您可以取消绑定选择 mouseenter 上的模糊功能并在 mouseleave 上再次绑定它：

$("#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();
    });
})();