在可选择元素中输入模糊

Question

我在Jquery-UI selectable元素中有一个输入元素。我想在点击输入外时触发blur事件，但这是不可能的，因为容器，selectable元素停止传播mousedown。

例子。

如何触发blur事件?

Answer 1

我在处理复杂的UI时经常遇到这些问题，在这里试一下:

http://jsfiddle.net/LNtqE/5/

代码所做的是向文档注册一个伪模糊事件，该事件只会触发一次，然后自行解除绑定。事件只会在目标而不是注册它的输入时触发…这可能适用于所有输入，也可能适用于特定的输入，具体取决于您提供给选择器的内容:)

$(document).ready(function(){
    $('#selectable').selectable({});
    $("input").on("focus", function(e) {
        var $input = $(this);
        $(document).on("mouseup", function(e2) {
            if( !$(e2.target).is( $input )) {
                $input.trigger("blur");
                $(this).off(e2);
            }
        });
    });
});