jQuery 模糊事件，单击特定 div 时除外

Question

这是我的代码:

   $("#newGenreTxt").blur(function () {
        $("#txtAddGenreContainer").slideUp();
    });

如果文本框失去焦点，我想隐藏它，但问题是，如果用户单击除我的按钮之外的任何地方，我想隐藏它:

$("#addGenreFinal").click(function () {});

因此，如果用户单击 addGenreFinal 则不会发生任何事情，如果是其他情况则隐藏文本框。

Answer 1

您可以将 .slideUp() 调用绑定(bind)到在文档对象上触发的单击事件，然后取消单击(如果在 addGenreFinal 或newGenreTxt 元素:

//add event handler to hide the `txtAddGenreContainer` element when the document is clicked
$(document).on('click', function () {
    var $tar = $("#txtAddGenreContainer");//UPDATE
    if ($tar.css('display') != 'none') {//UPDATE
        $tar.slideUp();
    }//UPDATE
});

//add event handler to the `addGenreFinal` and `newGenreTxt` elements to stop the click event from bubbling up the document
$('#addGenreFinal, #newGenreTxt').on('click', function (event) {
    event.stopPropagation();
});

这是一个jsfiddle:http://jsfiddle.net/jasper/qrSEn/