MrBuggy MrBuggy - 4 months ago 20
HTML Question

Detect long click on tablet with ng-click or jquery

Hi I've got follow div:



angular.module("myApp", ['ngTouch']).controller("myController", function($scope) {
$scope.longClick = function() {
console.log('I was clicked long');
}
});

.longClick {
width: 200px;
height: 20px;
line-height: 20px;
color: white;
font-family: Arial;
background-color: grey;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular-touch.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular.min.js"></script>


<div ng-app="myApp" ng-controller="myController" class="longClick" ng-click="longClick()">Click me long...</div>





I would like to detect on the tablet, when the div was clicked/touched with a long press and print then the text in the console. I found some answers for such questions but everything I tried didn't work. Any ideas? Thanks.

Answer

I wrote you this piece of code, it should do the trick. I'm basically taking the time of mousedown and the time of mouseup and compare them

var start;
$(window).mousedown(function(e) {
  start = new Date().getTime();
  
}).mouseup(function(e) {
  var end = new Date().getTime();
  var timeDiff = (end-start)/1000; 
  $('p').text(timeDiff + " seconds");
  
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<div>
  Click the result area
</div>
<p></p>