Событие Click теряется для элемента с анимированными изображениями - PullRequest
Новая
       20

Событие Click теряется для элемента с анимированными изображениями

0 голосов
/ 10 февраля 2012

Я написал некоторый код, который производит простые анимации, основанные на циклическом перегрузке изображений, показывая одно изображение за раз, а остальные скрыты.Каждый кадр показывается в течение 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;
}

The #Элемент owl расположен абсолютно внутри относительно позиционированного элемента div.

Элемент #owl является ссылкой на '/', но нажатие на анимацию ничего не дает.Этот код: 

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

Никогда не исполняется при нажатии на него.Аналогично, добавление события onclick непосредственно к html элемента не восстанавливает кликабельность.

Если я сделаю элемент <a> больше, чем анимированные кадры внутри него, часть, которая выходит за пределыанимация сохраняет свое событие click, запускается приведенный выше код и идет ссылка.

Почему я потерял событие 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');
    })
});

Ответы [ 3 ]

1 голос
/ 10 февраля 2012

Понятия не имею, почему щелчок не работает, но у меня есть решение.Вы можете добавить дополнительный прозрачный элемент сверху, и тогда все будет работать.

Рабочий образец: http://jsfiddle.net/lolo/pJ5sE/1/

0 голосов
/ 10 февраля 2012

Примечание: 

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

возвращает false, чтобы остановить действие браузера при нажатии на

0 голосов
/ 10 февраля 2012

Ваш .click() заключен в $(document).ready({}), потому что в противном случае код get выполняется до полной загрузки DOM, что означает, что он не может найти $('#owl') в этот момент!
Вам также следует передать событие методу click, чтобы использовать e.preventDefault(), чтобы убедиться, что в ваш URL ничего не добавлено!

...