Question

如何自动将长按事件转换为右键点击事件？由于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小部件提供了类似的拖拉支持。但是这个插件不支持长按。

http://code.google.com/p/jquery-ui-for-ipad-and-iphone/实际上确实执行了所需的翻译，但它会制动滚动，因此对于需要滚动支持的常规网站来说它无用。

感谢任何帮助 - 谢谢！

Answer 1

您可以编写简单的插件来处理此类事件。让我们称之为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);
        });
    });
};

显然，您希望在iPad的情况下将mousedown和mouseup更改为touchstart和touchend。

用法：http://jsfiddle.net/dfsq/RZgxT/1/

Answer 2

您可以使用超时：

var timeoutLongTouch;
var $mydiv = $j('#myDiv');

// Listen to mousedown event
$mydiv.on('mousedown.LongTouch', function () {
    timeoutLongTouch = setTimeout(function () {
        $mydiv.trigger('contextmenu');
    }, 1000);
})
// Listen to mouseup event
.on('mouseup.LongTouch', function () {
    // Prevent long touch 
    clearTimeout(timeoutLongTouch);
});

Answer 3

所有解决方案均不适用于桌面浏览器。您还应该调整“点击”处理程序的行为，因为所有“长按”事件也应跟在“点击”事件之后。

在这种情况下，类似以下代码：

itemEl.click(function(event){

    if ($(this).data('itemlongtouch')){
        $(this).data('itemlongtouch', false);
    }else{
        //some work
    }
});

itemEl.longTap(function(event){
    $(this).data('itemlongtouch', true);
    //some work
});

JavaScript：将长按事件转换为右键单击事件

3 个答案: