Javascript 根据按钮按下的时间将两个功能绑定到一个按钮

我想有一个按钮，调用不同的功能，如果它被按下超过3秒。以下代码适用于鼠标事件，但在具有触摸事件的移动设备上失败：

angular.module（'myApp'，[]）.controller（'myCtrl'，function（$scope，$timeout）{
变量映射服务={
setHome:function（）{
log（“调用setHome”）；
},
goHome:function（）{
log（“调用goHome”）；
}
};
var\u homeDownTimeout=null；
var\u homeWasSet=false；
$scope.homeDown=函数（）{
_homeDownTimeout=$timeout（函数（）{
mapService.setHome（）；
_homeWasSet=true；
}, 3000);
};
$scope.homeUp=函数（）{
如果（_homeDownTimeout）{
$timeout.cancel（_homeDownTimeout）；
}
如果（！\u homeWasSet）{
mapService.goHome（）；
}否则{
_homeWasSet=false；
}
};
});

家
使用Chrome中的移动仿真器，您的问题似乎不在于代码，而在于触摸并按住元素时选择元素，这会中断
mouseup
事件

一个简单的修复方法是在按钮CSS中设置，如中所述


angular.module（'myApp'，[]）.controller（'myCtrl'，function（$scope，$timeout）{
变量映射服务={
setHome:function（）{
log（“调用setHome”）；
},
goHome:function（）{
log（“调用goHome”）；
}
};
var\u homeDownTimeout=null；
var\u homeWasSet=false；
$scope.homeDown=函数（）{
_homeDownTimeout=$timeout（函数（）{
mapService.setHome（）；
_homeWasSet=true；
}, 3000);
};
$scope.homeUp=函数（）{
如果（_homeDownTimeout）{
$timeout.cancel（_homeDownTimeout）；
}
如果（！\u homeWasSet）{
mapService.goHome（）；
}否则{
_homeWasSet=false；
}
};
});
按钮{
-webkit触摸标注：无；/*iOS Safari*/
-webkit用户选择：无；/*Chrome/Safari/Opera*/
-khtml用户选择：无；/*Konqueror*/
-moz用户选择：无；/*Firefox*/
-ms用户选择：无；/*IE/Edge*/
用户选择：无；/*无前缀版本，当前
任何浏览器都不支持*/
}

家
不太确定角度，但使用纯javascript我会这样做

使用以下命令获取按下按钮的当前时间和释放按钮的当前时间：

var Time = new Date().getTime();

减去这两个，如果两者之间的差值大于3000，则按下的时间超过3秒
 我现在写了一个指令。使用Chrome、FF和iPhone进行测试。这里的问题是在iPhone上触发了触摸和鼠标事件（按此顺序），所以我必须在触发触摸事件后立即解除鼠标事件的绑定

HMTL：

谢谢你的意见。我仍然有相同的行为与模拟器->鼠标被中断，也许离子有一个互动在这里。然而，在我的iPhone上，mouseup事件被触发，但mousedown在touchend而不是touchstart上触发，并在mouseup事件之前执行。
<button class="button icon ion-home button-map" ng-holdclick="mapService.goHome(),mapService.setHome(),3000"></button>

app.directive("ngHoldclick", ['$timeout', function ($timeout) {
return {
    controller: function ($scope, $element, $attrs) {
        $element.bind('touchstart', onTouchStart);
        $element.bind('touchend', onTouchEnd);
        $element.bind('mousedown', onMouseDown);
        $element.bind('mouseup', onMouseUp);
        var params = $element.attr('ng-holdclick').split(",");
        var touchStartTimeout = null;
        var secondFunctionWasCalled = false;
        function onTouchStart(event) {
            $element.unbind('mousedown', onMouseDown);
            $element.unbind('mouseup', onMouseUp);
            $scope.$event = event;
            secondFunctionWasCalled = false;
            if (touchStartTimeout) {
                $timeout.cancel(touchStartTimeout);
            }
            touchStartTimeout = $timeout(function () {
                $scope.$apply(params[1]);
                secondFunctionWasCalled = true;
            }, params[2]);
        };
        function onMouseDown(event) {
            $element.unbind('touchstart', onTouchStart);
            $element.unbind('touchend', onTouchEnd);
            $scope.$event = event;
            secondFunctionWasCalled = false;
            if (touchStartTimeout) {
                $timeout.cancel(touchStartTimeout);
            }
            touchStartTimeout = $timeout(function () {
                $scope.$apply(params[1]);
                secondFunctionWasCalled = true;
            }, params[2]);
        };
        function onTouchEnd(event) {
            $scope.$event = event;
            if (touchStartTimeout) {
                $timeout.cancel(touchStartTimeout);
            }
            if (!secondFunctionWasCalled) {
                $scope.$apply(params[0]);
            } else {
                secondFunctionWasCalled = false;
            }
        };
        function onMouseUp(event) {
            $scope.$event = event;
            if (touchStartTimeout) {
                $timeout.cancel(touchStartTimeout);
            }
            if (!secondFunctionWasCalled) {
                $scope.$apply(params[0]);
            } else {
                secondFunctionWasCalled = false;
            }
        };
    }
};
}]);