如何使用 Java 脚本转换鼠标事件和触摸事件
how to convert mouse events and touch events using java script
关于如何在平板电脑或iPad中使用双击事件的任何想法。就像"onmousedown"等同于"touchstart"。
也许锤子.js多点触控手势库也会让你感兴趣:http://eightmedia.github.com/hammer.js/
我想快速的谷歌搜索可以解决您的问题,简短的回答是肯定的。 长答案是,你最好使用像jQuery-mobile这样的框架来为你处理这个问题,给你触摸,滚动等事件。
还要研究激励.js使这些点击事件更快
也类似于这个堆栈Voverflow答案
To Detect long press you can simply use like this.
<div id="element" style="width:200px;height:200px; border:1px solid red;"> </div>
<!------------ Javascript Code ---------->
$('#element').each(function() {
var timeout, longtouch;
$(this).mousedown(function() {
timeout = setTimeout(function() {
longtouch = true;
}, 1000);
}).mouseup(function() {
if (longtouch) {
alert('long touch');
} else {
alert('short touch');
}
longtouch = false;
clearTimeout(timeout);
});
});
老化的主题,但尚未标记为已回答,所以我想我会试一试。
在大多数情况下,向事件添加抽象层的 JavaScript 框架会有所帮助。(正如其他人所指出的。但是对于你不能的情况,试试这个。
var el = document.getElementById('myelement');
var numClicks = 0; // count the number of recent clicks
var lastClickTime = 0; // time of last click in milliseconds
var threshold = 50; // you need to set this to a reasonable value
function isDoubleClick() {
var r;
if( numClicks == 0 ) {
numClicks++; // first click never counts
r = false;
} else if( new Date().getTime() - lastClickTime > threshold ) {
numClicks = 1; // too long time has passed since lsat click, reset the count
r = false;
} else {
numClicks++; // note: reset numClicks here if you want to treat triple-clicks and beyond differently
r = true;
}
lastClickTime = new Date().getTime();
return r;
}
var myClickFunction = function (event) {
if( isDoubleClick() ) {
// your double-click code
} else {
// plain click code
}
}
// bind your own click function to the mouse click event
el.addEventListener("mouseclick", myClickFunction, false);
Try to implement doubleTap you can use this code.
(function($){
// Determine if we on iPhone or iPad
var isiOS = false;
var agent = navigator.userAgent.toLowerCase();
if(agent.indexOf('iphone') >= 0 || agent.indexOf('ipad') >= 0){
isiOS = true;
}
$.fn.doubletap = function(onDoubleTapCallback, onTapCallback, delay){
var eventName, action;
delay = delay == null? 500 : delay;
eventName = isiOS == true? 'touchend' : 'click';
$(this).bind(eventName, function(event){
var now = new Date().getTime();
var lastTouch = $(this).data('lastTouch') || now + 1 /** the first time this will make delta a negative number */;
var delta = now - lastTouch;
clearTimeout(action);
if(delta<500 && delta>0){
if(onDoubleTapCallback != null && typeof onDoubleTapCallback == 'function'){
onDoubleTapCallback(event);
}
}else{
$(this).data('lastTouch', now);
action = setTimeout(function(evt){
if(onTapCallback != null && typeof onTapCallback == 'function'){
onTapCallback(evt);
}
clearTimeout(action); // clear the timeout
}, delay, [event]);
}
$(this).data('lastTouch', now);
});
};
})(jQuery);
and to use doubleTap event
$(selector).doubletap(
/** doubletap-dblclick callback */
function(event){
alert('double-tap');
},
/** touch-click callback (touch) */
function(event){
alert('single-tap');
},
/** doubletap-dblclick delay (default is 500 ms) */
400
);
我尝试了这样的事情:
<------java script and jquery ------>
var startTime,endTime;
$('#main-content').mousedown(function(event){
startTime = new Date().getTime();
//any other action
});
$('#main-content').mouseup(function(event){
endTime = new Date().getTime();
if(isTouchDevice()){
if((endTime-startTime)>200 && (endTime-startTime)<1000 ){
alert('long touch')
}
}
});
function isTouchDevice(){
return (typeof(window.ontouchstart) != 'undefined') ? true : false;
}
相关文章:
- 谷歌地图劫持了iphone's滚动(触摸事件)-如何恢复
- 如何在jquery中找到鼠标滚轮/触摸移动事件的走向
- 如何使用纯javascript的移动触摸事件
- 触摸启动事件未在iframe iOS 6中启动
- 如何检测滚动事件是否像在触摸设备上一样只触发一次
- 触摸滑动所有事件
- 移动定时触摸事件
- 模拟html5的触摸事件
- Phonegap/Cordova:如何添加Javascript多点触摸事件
- 如何在AngularJS中监听点击事件,而不是触摸事件
- 我可以让我的网站的内容可编辑区域对安卓股票浏览器上的触摸事件更敏感吗
- 当鼠标也在触摸另一个元素时,d3.js鼠标悬停事件未被触发
- 在 Firefox 中“解析”触摸事件
- 将触摸事件转换为鼠标事件仅每秒有效一次
- 在移动 Safari 上向下拖动时,触摸事件停止触发 - iPad HTML5
- 如何在 javascript 中触发触摸事件
- 为什么触摸事件不在手指按压的中间
- 如何启用离子多点触摸事件
- JavaScript事件.触摸数组
- D3鼠标事件触摸事件,即点击->支持触摸事件