使用 ng-click 或 jquery 检测平板电脑上的长按

Posted

技术标签:

【中文标题】使用 ng-click 或 jquery 检测平板电脑上的长按【英文标题】:Detect long click on tablet with ng-click or jquery 【发布时间】:2016-11-24 15:58:11 【问题描述】:

嗨,我已经关注 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>

我想在平板电脑上检测到,当长按单击/触摸 div 并在控制台中打印文本时。我为这些问题找到了一些答案,但我尝试的一切都没有奏效。有任何想法吗?谢谢。

【问题讨论】:

【参考方案1】:

我给你写了这段代码,它应该可以解决问题。 我基本上是把mousedown的时间和mouseup的时间拿来比较一下

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>

【讨论】:

以上是关于使用 ng-click 或 jquery 检测平板电脑上的长按的主要内容,如果未能解决你的问题,请参考以下文章

使用非本机工具在 Qt 中检测平板电脑或手机的正确方法

没有 jquery/js 的动画 ng-click

处理长按和 ng-click

Angular Js中的JQuery数据库Ng-Click无法正常工作?

在 jQuery click 事件中停止底层 ng-click 的传播

CSS媒体查询不足以检测超大型移动/平板设备与桌面设备[重复]