在点击事件中分配点击事件处理程序答案

【问题标题】：Assigning a click-event-handler inside a click-event在点击事件中分配点击事件处理程序
【发布时间】：2015-04-19 01:14:05
【问题描述】：

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

看看this Fiddle

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

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

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

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

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

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

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

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

【问题讨论】：

标签： javascript jquery

【解决方案1】：

可以防止事件传播到 DOM。

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

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

【讨论】：

就是这样。完全忘记了这一点。非常感谢！

【解决方案2】：

请检查此代码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;
}

【讨论】：

【解决方案3】：

用stopPropagation 阻止它冒泡:)

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

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

【讨论】：

哦，我的错，@Kevin Bowersox 打败了我！