你能检测到安装了angular-touch的javascript双击吗答案

【问题标题】：can you detect a double-tap from javascript with angular-touch installed你能检测到安装了angular-touch的javascript双击吗
【发布时间】：2014-03-07 18:01:49
【问题描述】：

我正在尝试在触摸设备上分配一个手势来“删除照片”，双击是有意义的。有没有一种角度友好的方法来检测来自javascript的double-tap，甚至是long-tap？ Angular-touch 不支持开箱即用。

PS：我知道我可以使用hammer.js，但如果可以避免的话，我宁愿不加载另一个库。 angular-carousel 已经加载了 angular-touch

【问题讨论】：

标签： javascript ios angularjs

【解决方案1】：

我浏览了 angular-touch.js 并添加了这个：

  longtapHandler = $parse(attr.ngLongtap),

这个：

  /*
   * add longtap event
   */
  if (tapping && diff > (1 * TAP_DURATION) && dist < MOVE_TOLERANCE) {
    // Call preventGhostClick so the clickbuster will catch the corresponding click.
    preventGhostClick(x, y);

    // Blur the focused element (the button, probably) before firing the callback.
    // This doesn't work perfectly on Android Chrome, but seems to work elsewhere.
    // I couldn't get anything to work reliably on Android Chrome.
    if (tapElement) {
      tapElement.blur();
    }

    if (!angular.isDefined(attr.disabled) || attr.disabled === false) {
      element.triggerHandler('longtap', [event]);
    }
  }

还有这个

element.on('longtap', function(event, touchend) {
  scope.$apply(function() {
    longtapHandler(scope, {$event: (touchend || event)});
  });
});

它似乎工作正常。

【讨论】：

【解决方案2】：

如果没有本地方法可以做到这一点，您可以使用计时器手动设置它。这是一个使用 javascript 的实现。相同的概念只需将其转换为您的角度事件。

clicks++;
if (clicks == 1) {
    setTimeout(function(){
        if(clicks == 1) {
            single_click_callback.call(self, event);
        } else {
            double_click_callback.call(self, event);
        }
    clicks = 0;
    }, timeout || 300);
}

Code taken from this link

【讨论】：

【解决方案3】：

您可以使用ios-dblclick，这是我编写的用于处理iOS Safari 上的双击事件的指令。它没有依赖关系，像ng-dblclick 一样工作。它可用here on Github。

这是一个使用示例

<div ios-dblclick="removePhoto()"></div>

还有指令

.directive('iosDblclick',
    function () {

        const DblClickInterval = 300; //milliseconds

        var firstClickTime;
        var waitingSecondClick = false;

        return {
            restrict: 'A',
            link: function (scope, element, attrs) {
                element.bind('click', function (e) {

                    if (!waitingSecondClick) {
                        firstClickTime = (new Date()).getTime();
                        waitingSecondClick = true;

                        setTimeout(function () {
                            waitingSecondClick = false;
                        }, DblClickInterval);
                    }
                    else {
                        waitingSecondClick = false;

                        var time = (new Date()).getTime();
                        if (time - firstClickTime < DblClickInterval) {
                            scope.$apply(attrs.iosDblclick);
                        }
                    }
                });
            }
        };
    });

【讨论】：