在鼠标事件之间传递数据

Question

How can one pass events between mousedown and mouseup specifically? In my mousedown event I create a circle and add it to the DOM, in my mouseup I want to animate the circle. I was hoping to do this by referencing the node without attaching an ID, if possible.

Here's a snippet of my code:

// Mouse down
hitArea.addEventListener('mousedown', function(e) {
  var el = new createCircle();

  mask.appendChild(el);

  TweenMax.set(el, {
    transformOrigin: '50% 50%',
    x: e.clientX - hitDimensions.left, 
    y: e.clientY - hitDimensions.top
  });
});

// Mouse up
hitArea.addEventListener('mouseup', function(e) {

  // Reference to el needed
  animateCircle(el, e);

});

You can view my in progress code here: http://codepen.io/getreworked/pen/VjzyLL

Answer 1

You can just use closures:

var el;
hitArea.addEventListener('mousedown', function(e) {
  el = new createCircle();

  mask.appendChild(el);

  TweenMax.set(el, {
    transformOrigin: '50% 50%',
    x: e.clientX - hitDimensions.left, 
    y: e.clientY - hitDimensions.top
  });
});

// Mouse up
hitArea.addEventListener('mouseup', function(e) {

  if(el)
     animateCircle(el, e);

});