防止'单击'多次触发的事件+带有衰落的问题

Prevent 'click' event from firing multiple times + issue with fading

本文关键字：问题 单击 防止 事件      更新时间：2023-11-30

各位早上好。我正在制作的一个简单的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很陌生，我想学习一些东西，而不是使用一些现成的代码。

如有任何帮助，不胜感激。

感谢

您是否总是可以尝试在元素中添加一些内容来取消点击事件？

例如

$(".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/

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

.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});
相关文章：