Question

这似乎应该非常简单。我在页面上设置了一些动画图像，但我希望用户能够随时点击其中任何一个，然后转到相关页面。

问题是，如果我使用循环搜索可点击项目数组，显然点击停止在某些时候被监听。我认为有一个功能与处理动画的功能分开，无论动画图像是做什么都会让它不断听，但似乎一旦调用“完整”功能（对于“动画”功能），功能正在侦听点击（完全与动画分开，并使用setInterval来监听点击）会停止聆听。

奇怪的是，我认为只是在听“img”而不是一系列不同的图像时我没有这个问题。

关于我做错了什么的想法？需要更多信息？ 我尝试删除以下任何不相关的代码。

var links = ["#portfolio", "#animations", "#games"];

$(function() {
    setInterval(function(){
        for (var i=0; i<links.length; i++) {
            $(links[i]).click(function(){
                window.location.replace("http://www.gog.com");
            });
        }
    }, 500);
});

$(document).ready(function() {

    links.forEach(function(current){

        //various vars
        var link = $(current);
        var footer3 = $(".footer3");
        var over = true;
        var randomTime = 3000*(Math.random()+1);

        //dust vars
        ...

        //image vars
        var imageUrlShadow = 'images/home/non-char/shadow-pngs/shadow';
        var imageUrlCharacter = 'images/home/char-pngs/';
        var portfolioSrc;
        var animationsSrc;
        var gamesSrc;

        //animate the characters
        link.animate({
            top: '0'
        }, {
            duration: randomTime,
            easing: 'easeOutBounce',
            step: function(now, tween) {

                /*handle shadows*/
                ...

                /*handle characters*/
                if (now < -25 && over == false) {

                    ...

                } else if (now >= -25) {

                    ...
                }

                $("#"+ link.data("portfolio")).attr('src', portfolioSrc);
                $("#"+ link.data("animations")).attr('src', animationsSrc);
                $("#"+ link.data("games")).attr('src', gamesSrc);

                /*handle dust*/
                var dustDoneMoving = '-50px';
                var dustNotMoving = '0px';
                //if link is NOT touching footer3
                ...

            //set to "sitting" images when animation is done
            complete: function() {
                ...
                setTimeout(function() {
                    ...
                }, 1000);
            }
        })
    })
});

Answer 1

var links = ["#portfolio", "#animations", "#games"];

$(function() {
   $(links.join(',')).click(function(){
        window.location.replace("http://www.gog.com");
   });
});

只有一次和听众将附加到图像。

Answer 2

考虑通过window

进行聆听

var links = ["#portfolio", "#animations", "#games"];

$(window).on('click', links.join(', '), function() {
  // do what you wanna
});

Answer 3

我修改了你的代码。如果现在有效，请参阅。

我添加了一个包含一些网址的数组。因此，目的是在点击特定元素时，应打开其各自的URL。因此，这些数组中的序列相互重要。

另外，我已经使用了＆＃39;，以便点击＆＃39;即使在动画期间也应该处理事件。

var links = ["#portfolio", "#animations", "#games"];

var sites = ["http://www.gog.com", "http://www.gog1.com", "http://www.gog2.com"]; //change these to the expected URLs

$(function() {

   for (var i=0; i<links.length; i++) {
      $(document ).on("click",links[i],function(){
                window.location.replace(sites[i]);
      });
   }

});

Answer 4

我很抱歉，事实证明，问题显然与z-index有关。还有一些其他div具有0不透明度“覆盖”数组div。将数组项的z-index设置为2已解决此问题。再次，我道歉。

有JS功能不断听取点击？

4 个答案:

有JS功能*不断*听取点击？

4 个答案:

有JS功能不断听取点击？