javascript - 当用户在范围外单击时,试图获取一个 jquery 脚本来隐藏元素

标签 javascript jquery

我正在尝试实现一些代码,当用户在下拉框本身的范围之外单击时,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 元素创建点击处理程序。为停止传播点击事件的表单创建点击处理程序。这样,如果您在表单内部单击,事件就不会冒泡到 body 事件单击处理程序。

$('body').click( function() {
     hide();
});

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

关于javascript - 当用户在范围外单击时,试图获取一个 jquery 脚本来隐藏元素,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/7953712/

相关文章:

javascript - 在 JQuery 中创建动态创建元素的事件

javascript - 如何使用 Javascript 而不是 jQuery 来实现scrollTop 和toggleClass?

javascript - 单击具有相同类的元素并删除先前的属性

Javascript 对象碰撞

JavaScript 正则表达式(缺少 '/' ),我该如何解决这个问题?

javascript 将 YouTube 链接转换为嵌入视频

javascript - jQuery Datepicker 显示当前日期

JavaScript:当我尝试使用 DOM 时,我的 for 循环似乎不起作用

javascript - 如何找到 Canvas 上两个向量之间的 Angular ?

jquery - href ="mailto:"在 jQuery colapsible-set 中不起作用