jquery如何在执行函数时全局禁用onclick？答案

【问题标题】：jquery how to disable onclick globally while executing a function?jquery如何在执行函数时全局禁用onclick？
【发布时间】：2013-11-19 12:26:25
【问题描述】：

我有一个 html 菜单，其中包含通过 ajax 加载页面主要内容的链接。菜单中的 href 链接是空的，内容通过 onclick 绑定函数加载：

<a href="#" onclick=home_link()>
    <i class="icon-home"></i>
    <span>Home</span>
</a>

function home_link() {
    $.ajax({
        url: 'home.html',
        dataType: 'html',
        cache : false,
        success: function(html) {
            $('#content_div').append(html);
        }
    });

我在菜单中有几个类似的链接，如果我一个一个地点击它们就可以了，但是如果我在一个已经加载的时候点击另一个链接，就会发生不需要的事情，比如各种内容进入<div>。

我想在函数执行时全局禁用onclick，然后重新启用它或类似的东西，以防止在加载时点击其他链接。

【问题讨论】：

使用 unbind() .. 参考this

标签： jquery html ajax

【解决方案1】：

一种简单的方法是添加一个 div 叠加层，以防止网站中的所有点击。让它在触发点击时显示，并在 ajax 完成时隐藏：

#disableDiv{
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 10001;
}

该 div 将插入到 </body> 标记之前。我今天读到了一个 IE 问题，它允许底层元素触发点击事件。解决方案是添加背景。如果你不想要背景，你可以添加第二行，否则留下它：

background: #CCC;
opacity: 0; /* 0.5 would be nice with this color too */

【讨论】：