Question

嗨，我知道Onsen UI有“ons-gesture-detector”但还有另一种方法来监听hold事件？我想避免在AngularJS中构建指令。 Tks任何回复。大卫

Answer 1

ons-gesture-detector基于Hammer.JS，这意味着可以在不使用Angular指令的情况下使用。

例如，考虑到您要在其中检测hold操作的元素id="element"，您的代码应该是这样的。

var myElement = document.getElementById("element");

var onHold = ons.GestureDetector(myElement).on("hold", function(event) {
  alert('hello!');
});

您可以查看Hammer.JS documentation以获取有关语法的更多信息。请记住将Hammer替换为ons.GestureDetector。

希望它有所帮助！

Answer 2

使用onsen.io

完成保留和释放的示例

记住：

1 - 保持对$ interval的引用，以便在发布时取消

2 - 将您想要定期运行的$ interval中的函数传递给

3 - 在函数触发之间的时间内将毫秒传递给$ interval。

angular.element(document).ready(function(){
    // interval var
    var holding;
    // hold myBtn
    ons.GestureDetector( document.getElementById('myBtn') ).on("hold", function(event) {
        // run $scope.myBtnLogic() every 150 millseconds
        // pass reference ($scope.myBtnLogic), not function call ( $scope.myBtnLogic() )
        holding = $interval($scope.myBtnLogic, 150);
    });
    // release of myBtn
    ons.GestureDetector( document.getElementById('myBtn') ).on("release", function(event) {
        // if there is a holding instance, cancel it
        // release event will fire even on normal clicks so need blocker.
        if(holding){ $interval.cancel(holding); }
    });
});

Onsen UI +在移动设备上点击并按住

2 个答案: