Question

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

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

$("#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中的任何一个 - 它只会禁用点击的默认行为。

另一方面：

如果您希望专注于之前应该关注的任何元素：

请记住，在开始与选择
选择后恢复焦点

工作示例：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();
    });
})();

选择Box下拉菜单上的e.stopPropagation（）

2 个答案: