在click事件中分配click-event-handler

Question

在jQuery中处理click事件时遇到了一些奇怪的行为.

看看这个小提琴

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

此代码将click-event-handler绑定到某个按钮.单击此链接时,应在文档中添加事件处理程序,并在下次单击文档时发出"单击"警报.

但是当点击此按钮时,"点击"会立即收到警报而无需再次点击.显然,将新处理程序绑定到文档的click-event会冒泡到文档并立即运行刚刚分配的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小提琴: http ://jsfiddle.net/7ymJX/6/