防止“点击”事件多次触发 + 淡入淡出问题

Question

早上好。我正在制作一个简单的jQuery画廊，但遇到了问题。它允许用户通过一些按钮循环浏览图像集合，并在定时器上旋转这些图像。我的问题是，用户可以多次点击按钮，使淡入动画排队并重复执行，例如，用户点击按钮5次 > 相同的图像淡入/淡出5次 > 画廊移动到下一个图像。

我尝试使用： $('#homeGalleryImage li a').unbind('click'); 在点击事件触发后重新绑定： $('#homeGalleryImage li a').bind('click'); 但这只是在按一次按钮后删除了点击事件，而不会重新绑定？

我还尝试通过以下方式禁用按钮： $('#homeGalleryImage li a').attr('disabled', true); 但没有成功...?

还有一个次要问题，如果您在图像处于过渡状态时设法单击按钮，则下一个图像会显示为“淡化”，就好像透明度已经降低了？非常奇怪... 这里是按钮点击的代码：

var i = 1;
var timerVal = 3000;
$(function () {
    $("#homeGalleryControls li a").click(function () {
        var image = $(this).data('image');
        $('#galleryImage').fadeOut(0, function () {
            $('#galleryImage').attr("src", image);
        });
        $('#galleryImage').fadeIn('slow');
        $('.galleryButton').attr("src", "/Content/Images/Design/btn_default.gif");
        $(this).find('img').attr("src", "/Content/Images/Design/btn_checked.gif");
        i = $(this).data('index') + 1;
        if (i == 4) {
            i = 0;
        }
        timerVal = 0;
    });
});

这是一个定时循环图像的代码：

//Cycle through gallery images on a timer
window.setInterval(swapImage, timerVal);
function swapImage() {
    $('#galleryImage').fadeOut(0, function () {
        var imgArray = ["/Content/Images/Design/gallery placeholder.jpg", "/Content/Images/Design/1.jpg", "/Content/Images/Design/2.jpg", "/Content/Images/Design/3.jpg"];
        var image = imgArray[i];
        i++;

        if (i == 4) {
            i = 0;
        }

        $('#galleryImage').attr("src", image);
        $('#galleryImage').fadeIn('slow');
    });
    var currentButton = $('#homeGalleryControls li a img').get(i - 1);
    $('.galleryButton').attr("src", "/Content/Images/Design/btn_default.gif");
    $(currentButton).attr("src", "/Content/Images/Design/btn_checked.gif");
}

我意识到使用插件可能是一个更好的选择，但我对jQuery非常陌生，我想学习一些东西，而不是使用一些现成的代码。

非常感谢任何帮助。

谢谢。

- dtsg

Answer 1

您可以尝试向元素添加内容来取消点击事件吗？

例如：

$(".element").click(function(e) {

    if ( $(this).hasClass("unclickable") ) {
        e.preventDefault();
    } else {

        $(this).addClass("unclickable");
        //Your code continues here
        //Remember to remove the unclickable class when you want it to run again.

    }

}):

在你的情况下，你可以尝试在点击事件上添加一个检查。

$('#homeGalleryImage li a').attr('data-disabled', "disabled");

然后在您的点击事件中

if ( $(this).attr("data-disabled" == "disabled") {
  e.preventDefault();
} else {
  //Ready to go here
} 

编辑

这里有一个工作示例，展示了元素变得无法点击。 http://jsfiddle.net/FmyFS/2/

- Undefined

---

我刚试了一下，在点击代码完成后删除“unclickable”类，但似乎完全没有任何作用:( 我接下来会尝试你的另一个建议。 - dtsg

尝试了第二个建议，但仍然没有成功。看起来解绑/绑定一次应该可以解决问题，但似乎没有重新绑定？非常奇怪。不过还是谢谢！ - dtsg

这是 jsFiddle，我也会尝试使用您更新的答案。谢谢 http://jsfiddle.net/XqHFM/2/ - dtsg

我猜你在它们上面有某种悬停效果？你还需要在这些悬停函数中添加不可点击的检查。 - Undefined

在 jsFiddle 上玩了一下，发现是我使用的 jQuery 版本导致了淡入淡出/不透明度问题。我使用的是 'jquery-1.5.1.min.js'，而 jsFiddle 中的版本是 1.72，可以正常工作。感谢您的帮助，我已将此标记为已解决 :) - dtsg

Answer 2

如果您想确保注册事件只被触发一次，您应该使用jQuery的one：

.one( events [, data ], handler ) 返回值：jQuery

描述：为元素附加事件处理程序。每个元素每个事件类型最多执行一次处理程序。

参见示例：

使用jQuery：https://codepen.io/loicjaouen/pen/RwweLVx

// add an even listener that will run only once
$("#click_here_button").one("click", once_callback);

使用纯JS：https://codepen.io/loicjaouen/pen/gOOBXYq

// add a listener that run only once
button.addEventListener('click', once_callback, {capture: true, once: true});

- loic.jaouen