Question

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

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

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

但是当点击此按钮时，“点击”会立即收到警报而无需再次点击。显然，将新处理程序绑定到文档的click事件会冒泡到文档并立即运行刚刚分配的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/

Answer 2

阻止它与stopPropagation :)

一起冒泡

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

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

Answer 3

请查看此代码Demo

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;
}

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

3 个答案: