Javascript 禁用超链接直到动画完成/禁用已单击元素上的超链接

我在div中有多张图片，上面有class.overlay，当点击其中一张时，两个变量的内容填充了另外两个元素。然而，我还需要解决另外两件事

在动画完成之前，我希望所有的.overlay元素都不可拾取

我希望单击的.overlay在单击其他.overlay之前保持不可单击状态

代码：

---

可以设置一个互斥体，该互斥体在动画期间阻止单击，并在动画完成时释放：

var mutex = false;
$('.overlay').on("click",function() {
    //flag to determine the last clicked overlay
    $(this).data('active', true);
    $('.overlay').not(this).data('active', false);
    if (!mutex && !$(this).data('active')) {
        mutex = true;

        /* snip */
        //animation is complete, so allow clicking all overlay again
        }).animate({'opacity': 1}, 1000, function () { mutex = false; });
    }
});

---

可以设置一个互斥体，该互斥体在动画期间阻止单击，并在动画完成时释放：

var mutex = false;
$('.overlay').on("click",function() {
    //flag to determine the last clicked overlay
    $(this).data('active', true);
    $('.overlay').not(this).data('active', false);
    if (!mutex && !$(this).data('active')) {
        mutex = true;

        /* snip */
        //animation is complete, so allow clicking all overlay again
        }).animate({'opacity': 1}, 1000, function () { mutex = false; });
    }
});

---

查看如何在jquery中使用event.preventdefault，这应该会对您有所帮助。（我现在没有时间完全回答）查看如何在jquery中使用event.preventdefault，这应该会对您有所帮助。（我现在没有时间完全回答）

var mutex = false;
$('.overlay').on("click",function() {
    //flag to determine the last clicked overlay
    $(this).data('active', true);
    $('.overlay').not(this).data('active', false);
    if (!mutex && !$(this).data('active')) {
        mutex = true;

        /* snip */
        //animation is complete, so allow clicking all overlay again
        }).animate({'opacity': 1}, 1000, function () { mutex = false; });
    }
});