[英]Javascript add and remove eventlistner
I have a set of circles (.dot), and when we click one of them it animates another element. 我有一组圆圈(.dot),当我们点击其中一个圆圈时,它会动画另一个元素。
I am trying to set it up so that when one of these circles is clicked, then the mouseover, mouseout and click functions would be inactive for this one item. 我试图将其设置,这样,当其中一个圆圈被点击,然后鼠标悬停,鼠标移开,点击功能将不活动的这一个项目。
I need to use addEventListener and then removeEventListener or something similar, but I am having trouble implementing where this should be setup in the code. 我需要使用addEventListener然后removeEventListener或类似的东西,但我在实现应该在代码中设置的地方时遇到问题。
This code pen shows what I mean: https://codepen.io/celli/pen/MMwpjx 这段代码笔显示了我的意思: https : //codepen.io/celli/pen/MMwpjx
For this example I removed my addEventListner on the click function, since it was not working for me, and I am implementing it incorrectly. 对于这个例子,我在click函数上删除了我的addEventListner,因为它对我不起作用,而且我正在错误地实现它。
// mouseover and mouseout functions
$('.dotWrapper').mouseover(function(event) {
TweenMax.to($(this).children('.dot'), .25,{scale:3, ease: Circ.easeOut,
transformOrigin:"50% 50%"});
});
$('.dotWrapper').mouseout(function(event) {
TweenMax.to($(this).children('.dot'), .75,{scale:1, ease: Circ.easeOut});
});
// click function animates
$('.dotWrapper').click(function() {
TweenMax.to($(this).children('.dot'), .25,{scale:2, ease: Circ.easeOut});
$('.dot').removeClass('selected');
$(this).children('.dot').addClass('selected');
// clear existing lines and dates
TweenMax.to('.vertLine', .5, {alpha: 0, scaleY:1, ease:Expo.easeOut});
TweenMax.to('.timelineDate', .5, {alpha: 0, y:-20, ease:Expo.easeOut});
// animate the date and line
var dateLine = new TimelineMax({ });
dateLine.to($(this).children('.vertLine'), 1.2, {scaleY:.50,autoAlpha: 1,ease:Expo.easeOut})
.to($(this).children('.timelineDate'), 1, {autoAlpha: 1,y:20,ease:Expo.easeOut}, '-=1');
});
请查看是否可以使用.one()
而不是.click()
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.