Onsen UI + listen for a click-and-hold on mobile

Question

Hi I know Onsen UI has the "ons-gesture-detector" but there is another way to listen for a hold event? I would like to avoid building a directive in AngularJS. Tks for any reply. David

Answer 1

ons-gesture-detector is based on Hammer.JS, which means that can be used without using the Angular directive.

For example, considering that the element in which you want to detect the hold action has id="element", you code should be something like this.

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

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

You can check Hammer.JS documentation for more info about the syntax. Just remember to replace Hammer with ons.GestureDetector.

Hope it helps!

Answer 2

Complete Example for hold and release with onsen.io

Remember:

1 - hold reference to $interval so it can be cancelled on release

2 - pass reference to function in $interval that you want to run periodically

3 - pass milliseconds to $interval for time between your function firing.

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); }
    });
});