jor*_*jor 4 javascript jquery events touch
如何自动将长抽头事件转换为右键单击事件？由于许多触摸设备(如iPad)无法提供在网站上进行右键点击的方法,因此无需调整网站的代码即可.
例如,此代码专为具有鼠标支持的桌面浏览器而设计:
<html>
<head><title>Long tap to right click test</title></head>
<body>
<img src="dummy.png" oncontextmenu="alert('Hi!'); return false;" width="20" height="20" />
</body>
</html>
目标是在不修改代码的情况下将长抽头事件转换为右键单击事件.(当然只是加载一些JavaScript.)
如果看到https://github.com/furf/jquery-ui-touch-punch/为jQuery小部件上的drag'n'drop支持做了类似的事情.但是这个插件不支持长按.
此外,http://code.google.com/p/jquery-ui-for-ipad-and-iphone/确实可以执行所需的翻译,但它会制动滚动,因此对于需要滚动支持的常规网站来说它无用.
任何帮助表示赞赏 - 谢谢!
您可以编写简单的插件来处理此类事件.让我们称之为longTap事件.例:
$.fn.longTap = function(options) {
options = $.extend({
delay: 1000,
onRelease: null
}, options);
var eventType = {
mousedown: 'ontouchstart' in window ? 'touchstart' : 'mousedown',
mouseup: 'ontouchend' in window ? 'touchend' : 'mouseup'
};
return this.each(function() {
$(this).on(eventType.mousedown + '.longtap', function() {
$(this).data('touchstart', +new Date);
})
.on(eventType.mouseup + '.longtap', function(e) {
var now = +new Date,
than = $(this).data('touchstart');
now - than >= options.delay && options.onRelease && options.onRelease.call(this, e);
});
});
};
显然,你想改变mousedown,并mouseup以touchstart和touchend在iPad上的情况.
用法:http://jsfiddle.net/dfsq/RZgxT/1/