可选元素内的输入模糊

Question

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

例如here。

如何触发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);

            }

        });

    });

});