14

在处理 jQuery 中的单击事件时，我遇到了一些奇怪的行为。

看看这个小提琴

$('#button').click(function() {
    $(document).one('click', function() {
        alert('clicked');
    });
});

此代码将单击事件处理程序绑定到某个按钮。单击此链接时，应将事件处理程序添加到文档中，并在下次单击文档时提醒“已单击”。

但是，当单击此按钮时，“单击”会立即发出警报，而无需再次单击。因此，显然将新处理程序绑定到文档的单击事件会冒泡到文档并立即运行刚刚分配的处理程序。

这种行为似乎非常违反直觉。我的意图是在单击按钮时显示一个元素，并在单击该元素外部时再次隐藏它。

$('#button').click(function() {
    // Show some element

    $(document).one('click', function() {
        // Hide the element again
    });
});

但这会导致元素立即被隐藏。

有没有人可以解决这个问题？

4

3 回答 3

18

可以防止事件传播到 DOM。

$('#button').click(function(e) {
    e.stopPropagation();
    $(document).one('click', function(e) {
        alert('clicked');
    });
});

JS 小提琴：http: //jsfiddle.net/7ymJX/6/

于 2013-09-11T08:35:44.440 回答
1

你能检查一下这个代码演示吗

HTML 代码

<button id="button">Click me!</button>
<div id="new_div"></div>

jQuery 

$('#button').click(function(e) {   
    e.stopPropagation();   
    $('#new_div').css('display', 'block');
    $('document, html').click( function() {
        alert('clicked');   
        $('#new_div').css('display', 'none');       
    });
});

CSS

#new_div { 
    height: 100px;
    width: 200px;
    border:1px solid black;
    display : none;
}
于 2013-09-11T08:48:55.330 回答
1

阻止它冒泡stopPropagation:)

编辑了元素隐藏的小提琴。

http://jsfiddle.net/AdamMartin121/7ymJX/12/

于 2013-09-11T08:41:05.993 回答