javascript - 在点击事件中分配点击事件处理程序

Question

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

看看this Fiddle

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

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

但是当点击这个按钮时，“clicked”会立即得到提醒而无需再次点击。因此，显然将新处理程序绑定(bind)到文档的点击事件冒泡到文档并立即运行刚刚分配的 hndler。

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

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

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

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

有没有人能解决这个问题？

Answer 1

可以阻止事件向上传播 DOM。

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

JS fiddle : http://jsfiddle.net/7ymJX/6/