Javascript添加和刪除eventlistner

Question

我有一組圓圈（.dot），當我們點擊其中一個圓圈時，它會動畫另一個元素。

我試圖將其設置，這樣，當其中一個圓圈被點擊，然后鼠標懸停，鼠標移開，點擊功能將不活動的這一個項目。

我需要使用addEventListener然后removeEventListener或類似的東西，但我在實現應該在代碼中設置的地方時遇到問題。

這段代碼筆顯示了我的意思： https ： //codepen.io/celli/pen/MMwpjx

對於這個例子，我在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');
        });

Answer 1

請查看是否可以使用.one()而不是.click()