Question

我想触发鼠标：仅当用户在元素上悬停超过特定设置间隔（例如200ms）时才触发事件。

目前我已使用此示例立即添加事件＆＃34;＆＃34;： http://fabricjs.com/hovering

在触发该事件之前添加延迟的最佳方法是什么？

此致亚历

Answer 1

在您的情况下，我认为您可以在mouse:over处理程序中使用 setTimeout 函数。这样你就可以在执行代码之前加上一些延迟。

所以我做了什么：

1）在setTimeout处理程序

中使用mouse:over

2）在var timeout;

中保存对已启动超时的引用

3）在timeout处理程序中的mouse:out变量上使用 clearTimeout ，以防止mouse:over中的代码被执行，如果鼠标在延迟完全完成

(function() {
  var canvas = this.__canvas = new fabric.Canvas('c');
  fabric.Object.prototype.transparentCorners = false;
  
  var timeout;
  canvas.on('mouse:over', function(e) {
    if(!e.target) return false;
    
    timeout = setTimeout(function(){
      e.target.setFill('red');
      canvas.renderAll();
    }, 1000)
  });

  canvas.on('mouse:out', function(e) {
    if(!e.target) return false;
    
    /* clear the timeout so we make sure that mouse:over code will not execute if delay is not completed */
    clearTimeout(timeout);
    
    e.target.setFill('green');
    canvas.renderAll();
  });

  // add random objects
  for (var i = 15; i--; ) {
    var dim = fabric.util.getRandomInt(30, 60);
    var klass = ['Rect', 'Triangle', 'Circle'][fabric.util.getRandomInt(0,2)];
    var options = {
      top: fabric.util.getRandomInt(0, 300),
      left: fabric.util.getRandomInt(0, 300),
      fill: 'green'
    };
    if (klass === 'Circle') {
      options.radius = dim;
    }
    else {
      options.width = dim;
      options.height = dim;
    }
    canvas.add(new fabric[klass](options));
  }
})();

<script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/1.7.16/fabric.js"></script>

<canvas id="c" width="300" height="300"></canvas>

我在此代码段中使用的当前超时是1000毫秒= 1秒。您可以在setTimeout功能中进行调整。我希望这对你有所帮助，如果有什么不清楚，请告诉我。

如何触发鼠标：使用fabricjs在一定间隔后过度事件？

1 个答案: