如何在 Angular Js 应用程序上启用双击

Posted 2023-03-14

【中文标题】如何在 Angular Js 应用程序上启用双击

【英文标题】：How to enable double tap on an Angular Js application

【发布时间】：2014-04-21 14:12:52

【问题描述】：

我创建了一个应用程序，使用户能够双击要编辑的项目。我想在移动设备上允许相同的功能，这意味着用户将双击以编辑该项目。

实现这一点的最简单方法是什么？我宁愿不使用任何额外的库（我听说过 Hammer 和 AngularTouch，但以前都没有使用过）也不想使用 jQuery（在我的应用程序中我完全放弃了 jQuery）。

如果实现这一点的唯一方法是使用库，那么最简单和最简单的方法是什么？

非常感谢

编辑：添加代码 这是我用于编辑项目的控制器：

// Double click to edit products
$scope.editItem = function (item) 

    item.editing = true;

;

$scope.doneEditing = function (item) 

    item.editing = false;
    $http.put('/api/users?id' + $scope.User.id, $scope.User);

;

$scope.cancelEditing = function (item) 

    item.editing = false;

;

$scope.deleteItem = function (item) 

    delete $scope.User.todos[item.id];

    $http.put('/api/users?id' + $scope.User.id, $scope.User);

;

这是我的模板（翡翠）

p(ng-dblclick="editItem(todo)", ng-hide="todo.editing").todo-title

    span todo.content

    form(ng-submit="doneEditing(todo)" ng-show="todo.editing", class="inline-editing-2")

        input(type="text", class="form-control", ng-model="todo.content")

    div.btn-block

        button(class="btn btn-success mr-1", ng-show="todo.editing", ng-click="cancelEditing(todo)")

            span(ng-click="doneEditing(todo)").fa.fa-check-circle

         button(class="btn btn-warning mr-1", ng-show="todo.editing", ng-click="cancelEditing(todo)")

            span(ng-click="cancelEditing(todo)").fa.fa-times-circle

如您所见，我使用 ng-doubleclick 来触发我的函数。我需要像 ng-double-tab 这样的东西来启动双击。我一直在阅读有关 Hammer 的更多信息，并将使用 Angular Hammer 进行双击，但我不确定它是如何工作的......

【问题讨论】：

您尝试了哪些方法，为什么没有成功？如果您已经创建了应用程序；重写的原因是什么？

请提供你的源代码我的朋友

@JeffryHouser 我没有重写，只是添加另一个函数和/或指令来处理双击。

@code360 我已按要求添加了源代码。

【参考方案1】：

您可以使用ios-dblclick，这是我编写的用于处理移动浏览器上的双击事件的指令（为 iOS 编写，但适用于其他浏览器）。它没有依赖关系，像ng-dblclick 一样工作。 它可用here on Github。

这是一个例子

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

这是该指令的代码

app.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);
                        
                    
                );
            
        ;
    );

【参考方案2】：

您始终可以实现自己的双击指令。首先查看 touchstart 和 touchend 。绑定到这些事件，并在指定的时间段内检查多次点击。

【参考方案3】：

就库而言，我们已经使用它来处理移动设备的 Angular 双击

https://github.com/technoweenie/jquery.doubletap

【讨论】：

感谢您的建议，但我宁愿不使用 jQuery。

好吧 angular 已经在使用精简版的 jQuery，所以它不会很糟糕

它是关于使用尽可能少的库使应用程序尽可能轻巧。另外，您在哪里看到 Angular 使用了 jQuery 的淡化版本？据我所知，您可以同时使用两者，是的，但我不知道这些库共享任何代码。

docs.angularjs.org/api/ng/function/angular.element 如果 jQuery 可用，则 angular.element 是 jQuery 函数的别名。如果 jQuery 不可用，则 angular.element 委托给 Angular 的内置 jQuery 子集，称为“jQuery lite”或“jqLit​​e”。 jqLit​​e 是一个微小的、API 兼容的 jQuery 子集，它允许 Angular 以跨浏览器兼容的方式操作 DOM。 jqLit​​e 仅实现最常用的功能，目标是占用空间非常小。

【参考方案4】：

上面的解决方案不适用于我的 IOS - 但我找到了另一个解决方案，它在我的 iPhone 上运行良好：

只为你分享：

http://jsfiddle.net/9Ymvt/3397/

fessmodule.directive('onDoubleClick', function($timeout) 
return 
    restrict: 'A',
    link: function($scope, $elm, $attrs)             
        var clicks=0;

         $elm.bind('click', function(evt) 
            console.log('clicked');

             clicks++;
if (clicks == 1) 
$timeout(function()
    if(clicks == 1) 
        //single_click_callback.call(self, event);
     else 
        $scope.$apply(function() 
            console.log('clicked');
                        $scope.$eval($attrs.onDoubleClick)
                    );
    
clicks = 0;
,  300);
         );

    
;
);