«Uncaught TypeError: that.getAttribute не является функцией» в последовательной рекурсии после работы с начальным вызовом

Question

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

  var sphere = d3.select('.sphere');
  var trigger = 1;
  var speed = 0.5;
  sphere.on('click', click);
  sphere.on('mouseenter', mouseenter);
  sphere.on('mouseleave',mouseleave);

  function mouseenter(){
    console.log("Mouse Enter" + trigger)
    trigger = 1;
  }

  function mouseleave(){
    console.log("Mouse leave" + trigger)
    trigger = 0;
  }

  function click(){
    console.log("Mouse click" + trigger)
    var that = this;
    setTimeout(function(){
      console.log("MOVE");
      var currentPosition = that.getAttribute('position');
      var sphere = d3.select(that);
      console.log(currentPosition);
      currentPosition["z"] -= speed;
      console.log(currentPosition);
      sphere.attr('position', currentPosition);
      if(trigger){
        click();
      }
    }, 1000)
  }

Результат

retry.html:41 Mouse click1
retry.html:44 MOVE
retry.html:47 {x: 0, y: 2.25, z: -1.5}
retry.html:49 {x: 0, y: 2.25, z: -2}
retry.html:41 Mouse click1
retry.html:44 MOVE
retry.html:45 Uncaught TypeError: that.getAttribute is not a function at retry.html:45

Я ожидал, что это будет продолжаться до тех пор, пока не будет выполнена mouseleave ().

Answer 1

Используйте Function.protytype.call, чтобы явно определить контекст для исключения функции:

if(trigger){
  click.call(that)
}