禁用锚点点击[重复]答案

【问题标题】：Disable Anchor onclick [duplicate]禁用锚点点击[重复]
【发布时间】：2011-05-19 10:59:05
【问题描述】：

可能重复：
How to enable or disable an anchor using jQuery?

我在锚点上有一个onclick，它会导致 2 个 div 改变它们的宽度（边栏切换的典型概念，同时放大内容）。但是，如果我在动画仍在播放时单击此锚点并再次单击它，它将从当前 div 的位置开始动画（例如 sideDiv 通常为 200px 宽度，内容为 1000px 宽度，如果我开始动画sideDiv 应该为 0，内容为 1200，但是，如果我在 side 为 100，内容为 1100 时再次单击，它们将切换回 300 和 900，这不是我想要的）。

所以，从逻辑上讲，我需要在播放动画时禁用 anchor-onclick 并再次启用它，我知道按钮的这个过程，锚点有什么类似的吗？

这是我的代码：

function toggleSideBar(e) {
        barWidth = $('#resizableBar').width();
        if ($('#content').width() >= "900") {
            $('#content').animate({ width: ($('#content').width() - barWidth) }, 200, function () {
                $('#resizableBar').animate({ width: "show" }, { duration: 200, queue: true});
            });
        }
        else {
            $('#resizableBar').animate({ width: "hide" }, 200, function () {
                $('#content').animate({ width: ($('#content').width() + barWidth) }, { duration: 200, queue: true });
            });

        }
    }

这是锚点：

<a id="btnSideDivSlide" onclick="toggleSideBar(this)" href="#">Sideslide</a>

谢谢，

丹尼斯

【问题讨论】：

标签： javascript jquery html onclick anchor

【解决方案1】：

这样的事情可能会奏效：

   var _isAnimating;

   function toggleSideBar(e) {
    if (_isAnimating) return;

    barWidth = $('#resizableBar').width();
    if ($('#content').width() >= "900") {
        _isAnimating = true;
$('#content').animate({ width: ($('#content').width() - barWidth) }, 200, function () {
            $('#resizableBar').animate({ width: "show" }, { duration: 200, queue: true,    complete: function(){  _isAnimating = false; }});
        });
    }
    else {
 _isAnimating = true;
        $('#resizableBar').animate({ width: "hide" }, 200, function () {
            $('#content').animate({ width: ($('#content').width() + barWidth) }, { duration:   200, queue: true, complete: function(){  _isAnimating = false; } });
        });

    }
}

（不确定我的语法是否完美，但你明白了）

【讨论】：

【解决方案2】：

您可以在函数的开头检查动画是否正在运行，如果是，请不要启动它。一个全局布尔值就可以了。

【讨论】：

您能具体说明如何实现吗？我对 jQuery（和一般的 JavaScript）比较陌生。

【解决方案3】：

在 jQuery 中，以下将禁用 onclick：

$("#btnSideDivSlide").unbind("click");

完成后你可以重新绑定：

$("#btnSideDivSlide").click(function(){
    toggleSideBar(this);
});

如果您将以下内容放入您的代码中，您可以完全从您的 HTMl 中消除 onlcick 事件属性：

$(document).ready(function(){
    $("#btnSideDivSlide").click(function(){
        toggleSideBar(this);
    });
});

这称为“后期绑定”，有助于在您的 HTML 中添加 eliminate obstrusive JavaScript，例如 onlick=。

【讨论】：

谢谢，怎么重新绑定？
不幸的是这不起作用，我在函数开头取消绑定onclick并在最后重新绑定它，但我仍然可以点击多次（+让动画重新开始当前 div 位置）。
找到了这篇可能有帮助的其他 SO 文章：stackoverflow.com/questions/1164635/…

【解决方案4】：

试试

HTML

<a id="btnSideDivSlide" href="#">Sideslide</a>

jQuery

$('#btnSideDivSlide').bind ('click' , function () {
  toggleSideBar(this);
})

【讨论】：

这样做我们只绑定一次