Javascript 在处理初始调用后的连续递归中“uncaughttypeerror:that.getAttribute不是函数”

我试图在用户单击屏幕上的对象时开始移动它，并在光标离开时阻止它移动

  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执行。

使用Function.protytype.call显式定义函数执行的上下文：

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