Question

我编写了一些代码，这些代码基于循环显示大量图像生成简单的动画，一次显示一个图像，其余图像隐藏。每帧显示50毫秒。

动画元素的HTML是这样的：

<a href="/" id="owl">
  <img class="owl frame active-frame" style="" src="http://example.com/image1">
  <img class="owl frame" style=" display:none;" src="http://thereisspacehere.org/wp-content/themes/twentyeleven/images/animation/owl/2.jpg">
  <img class="owl frame" style=" display:none;" src="http://example.com/image2">
  <img class="owl frame" style=" display:none;" src="http://example.com/image3">
</a>

CSS看起来像这样：

#owl {
  position:absolute;
  top:15px;
  left:13px;
  width:154px;
  height:170px;
}
.owl {
  position:absolute;
  top:0;
  left:0;
  width:154px;
  height:170px;
}

#owl元素绝对位于相对定位的div中。

#owl元素是指向'/'的链接，但点击动画不会做任何事情。这段代码：

$('#owl').click(function(){
  console.log('Clicked');
});

单击它时永远不会执行。同样，将onclick事件直接附加到元素的html不会恢复可点击性。

如果我使<a>元素大于其中的动画帧，那么超出动画的部分会保留其click事件，并且上面的代码会运行，并且链接紧随其后。

为什么我丢失了点击事件？我怎样才能找回它，或者我该如何解决这个问题呢？

非常感谢。

编辑 - 这是创建动画的代码。道歉！

Animation = {
    direction: 1,
    iterations: 0,
    maxIterations: 30,
    intervalId: false,
    element: '',
    active: false,
    cycle: function(element, iterations){
        this.element = element;
        $(element).addClass('animation');
        this.maxIterations = iterations;
        if (!this.active){
            this.intervalId = setInterval(function(){ Animation.changeFrame(Animation.element);},50);
            this.active = true;
        }
    },
    changeFrame: function(element){
        if (this.iterations > this.maxIterations){
            this.stop();
            this.revertToStart(element);
            this.active = false;
            this.iterations = 0;
        }
        var el = $(element);
        currentFrame = el.children('.active-frame');
        if (this.direction === 1){
            nextFrame = currentFrame.next('.frame');
        }else{
            nextFrame = currentFrame.prev('.frame');
        }
        if (nextFrame.length == 0){
            this.direction = this.direction ? 0 : 1;
            if (this.direction === 1){
                nextFrame = currentFrame.next('.frame');
            }else{
                nextFrame = currentFrame.prev('.frame');
            }
        }
        currentFrame.hide().removeClass('active-frame');
        nextFrame.show().addClass('active-frame');
        this.iterations++;
    },
    stop: function(){
        clearInterval(this.intervalId);
    },
    revertToStart: function(element){
        $(element).children('.frame').removeClass('active-frame');
        $(element).children('.frame').hide();
        $(element).children('.frame:first').show().addClass('active-frame');
    }
};
$(function(){
    $('#owl .frame:first').addClass('active-frame');
    $('#owl').mouseover(function(){
        Animation.cycle('#owl', 29);
    });
    $('#owl').click(function(){
        console.log('hey');
    })
});

Answer 1

我不知道为什么点击不起作用，但我有解决方案。您可以在顶部添加其他透明元素，然后一切都会正常工作。

工作样本：http://jsfiddle.net/lolo/pJ5sE/1/

Answer 2

你的.click()是否被$(document).ready({})包裹，否则代码会在DOM完全加载之前执行，这意味着他此时无法找到$('#owl')！
您还应该将事件传递给click方法以使用e.preventDefault()来确保您的网址没有添加任何内容！

Answer 3

注意：

$(document).ready(function(){
  $('#owl').click(function(){
    console.log('Clicked');
    return false
  });
})

单击时返回false以停止浏览器操作

对于内部带有动画图像的元素，Click事件将丢失

3 个答案: