防止“点击"事件多次触发以及出现褪色问题 [英] Prevent 'click' event from firing multiple times + issue with fading

问题描述

早上好.我正在制作一个简单的jQuery画廊时遇到问题.它使用户可以通过某些按钮循环显示图像集合，同时在计时器上循环显示这些图像.我的问题是用户能够多次单击该按钮，从而使动画中的淡入淡入队列，并一遍又一遍地重复播放，例如用户单击按钮5次>相同图片淡入/淡出5次>图片库移至下一张图片.

Morning folks. Have an issue with a simple jQuery gallery i'm making. It lets the user cycle through a collection of images via some buttons and at the same time, rotates through these images on a timer. My problem is that the user is able to click the button multiple times which queues up the fade in animation and repeats it over and over, e.g. user clicks button 5 times > same image fades in/out 5 times > gallery moves to next image.

我尝试使用:

$('#homeGalleryImage li a').unbind('click');

在触发click事件然后重新绑定之后:

After the click event is fired and then rebinding:

$('#homeGalleryImage li a').bind('click');

完成后，但这只是在按下一次按钮后就删除了click事件，并且再也没有绑定到它了吗?

After it's done but this simply removes the click event after pressing a button once and never rebinds to it?

我还尝试通过以下方式禁用按钮:

I've also tried disabling the button via:

$('#homeGalleryImage li a').attr('disabled', true);

无济于事...?

还有一个次要问题，如果您在图像过渡期间设法单击一个按钮，则下一张图像会褪色"，就像降低了不透明度一样?很奇怪...这是单击按钮的代码:

There is a secondary issue where if you manage to click a button while the image is in a transition, the next image appears 'faded' as if the opacity has been lowered? Very strange... Here is the code for button clicks:

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;
    });
});

以下是在计时器上循环显示图像的代码:

Here is the code that cycles through the images on a timer:

//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非常陌生，我想学习一些东西，而不是使用一些现成的代码.

I realise it might be a better idea to use a plugin but I'm very new to jQuery and I'd like to learn something rather than using some ready made code.

任何帮助，我们将不胜感激.

Any help at all, is much appreciated.

谢谢

推荐答案

您始终可以尝试向元素中添加某些内容以取消点击事件吗?

You could always try adding something to the element to cancel the click event?

例如

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

    }

}):

根据您的情况，您可以尝试在点击次数上添加支票.

In your case you could try adding a check on the click.

$('#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/

Here is a working example showing the element becoming unclickable. http://jsfiddle.net/FmyFS/2/

这篇关于防止“点击"事件多次触发以及出现褪色问题的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！