试图获得一个jquery脚本隐藏一个元素，当用户点击作用域外

Trying to get a jquery script to hide an element when a user clicks outside the scope

本文关键字：一个 用户 作用域 jquery 隐藏 脚本 元素      更新时间：2023-09-26

我正在尝试实现一段代码，当用户在下拉框本身的范围之外单击时，Twitter使用该代码关闭下拉登录框。

我有一点麻烦，目前，如果我点击元素的范围之外，它的工作原理如预期的，但同样的事情也发生当我点击元素范围内，即在#form元素。

HTML标记:

<body>
    <div id="form">
        <div id="form-tab"></div>
        <div id="form-header">FooBar</div>
        <form>
            <label>Test</label>
            <input type="text">
        </form>
    </div>
</body>
jQuery代码:

$(document).mouseup(function(e) {
    if ($(e.target).parent("div#form").length==0) {
        hide();
    }
});
function hide() {
    $element.animate({
        right: $rightPos
    }, 1000);
}

如果有人能帮我找出我错在哪里，我将不胜感激。

为隐藏表单的body元素创建一个click处理程序。为停止单击事件传播的表单创建单击处理程序。这样，如果您在表单中单击，事件就不会冒泡到主体事件单击处理程序中。

$('body').click( function() {
     hide();
});
$('#form').click( function(e) {
    e.stopPropagation();
});

try:

$(':not(#form)').mouseup(function(e) {
        hide();
});
http://api.jquery.com/not-selector/

相关文章：