javascript - 清除 JavaScript/jQuery 事件队列

Question

我们发现，在最近升级到 Google Chrome(版本 55+)期间，其中 pointer events 引入了“统一两种模型的更新标准:指针事件”。，我们需要修改我们处理事件的方式以向后兼容。我们的应用程序是专门为 Chrome 编写的。

我们已经experimenting今天早上，尝试找出触发了哪个事件(基于 Chrome 版本)，以便我们可以为所有应用程序的用户适本地处理该事件。作为测试，我写了以下内容:

$(document).on('mousedown touchstart pointerdown', '.foo', function(event){
    console.log( event.type + ": " +  event.which );
    switch(event.type) {
        case 'mousedown':
          console.log('moused!');
          break;
        case 'touchstart':
          console.log('touched!');
          break;
        case 'pointerdown':
          console.log('pointed');
          break;    
    };
})

在非移动设备中，mousedown 和 pointerdown 都会被注册。在移动设备中，所有三个事件都被输出到控制台。

澄清:需要的是在遇到并处理第一个事件后不会触发任何其他事件。换句话说，例如，如果 pointerdown 触发，那么我需要阻止 mousedown 和 touchstart 触发。随后的点击也应该有效，所以如果我得到一个 pointerdown 并再次单击我应该得到另一个 pointerdown(或者任何适合浏览器版本或设备的事件)。

我原以为 break; 会导致 jQuery 离开 switch()，但这并没有发生。所以我添加了 .clearQueue()对于每种情况:

$(this).clearQueue();

再一次，我预计事件会被遇到并得到处理，队列会被清除，我不会触发任何其他事件。

我错了

我开始觉得我错过了一些明显的东西，但我无法确定它。我试过.stop() , .finish()以及这些功能的组合，以拦截所需的一个功能(基于浏览器版本)并清除队列，以便其余功能不会触发。

我以为我很了解 JavaScript 事件队列，但显然我也错了。

我是否遗漏了一些明显的东西？如果是这样，它是什么？

Answer 1

我相信 .stop() 和 .finish() 与动画队列相关，而不是事件队列和 .clearQueue() 也与事件队列无关:

JQuery documentation说:

When used without an argument, .clearQueue() removes the remaining functions from fx, the standard effects queue. In this way it is similar to .stop(true). However, while the .stop() method is meant to be used only with animations, .clearQueue() can also be used to remove any function that has been added to a generic jQuery queue with the .queue() method.

但是，如果您已经处理了一个事件并希望阻止其他事件被引发，您可以在闭包中实现自己的 handled 标志作为变通方法:

这是一个示例(可执行版本 here ):

// These free variables will be shared in the various callback functions below
var handled = false;
var eventType = null;

$(document).on('mousedown touchstart pointerdown', '.foo', function(event){

   // If the current event hasn't been handled or if the current 
   // has been handled but the event is the same as the previous fired 
   // event, proceed:
   if(!handled || (handled && event.type === eventType)){

     // None of the events have been handled yet.
     // Determine which has fired and act appropriately:

     // Register the current event for comparison later
     eventType = event.type;

     console.log( eventType + ": " +  event.which );

     switch(eventType) {
        case 'mousedown':
          console.log('moused!');
          break;
        case 'touchstart':
          console.log('touched!');
          break;
        case 'pointerdown':
          console.log('pointed');
          break;    
     };

     // Flag that one of the events registered earlier has been handled
     handled = true;

   } else {

     // One of the earlier registered events has already been handled

     // Prevent the event from performing its native function
     // (i.e. cancel the event)
     event.preventDefault();

     // Don't allow the event to propagate
     event.stopPropagation();

   }

});