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

【问题标题】：JavaScript: translate long tap events to right click eventsJavaScript：将长按事件转换为右键单击事件
【发布时间】：2013-02-14 13:50:13
【问题描述】：

如何自动将长按事件转换为右键单击事件？由于许多触控设备（如 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/ 确实执行了所需的翻译，但它会阻止滚动，因此对于需要滚动支持的常规网站来说毫无用处。

任何帮助表示赞赏 - 谢谢！

【问题讨论】：

标签： javascript jquery events touch

【解决方案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/

【讨论】：

感谢您的回复！不幸的是，这个解决方案要求我必须修改我所有网站的代码，并在所有具有右键单击事件的元素上调用 longTap 函数。问题是不仅我自己的代码使用了右键单击事件，而且这些事件也由一些 JavaScript 插件触发。我必须深入修改所有内容:-(。

【解决方案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);
});

【讨论】：

维伦丹克！与以下相同：这是否可以更通用，以便我不需要在我想要使用它但具有“全局”翻译的所有元素上使用选择器？

【解决方案3】：

所有解决方案均不适用于桌面浏览器。您还应该调整 'click' 处理程序的行为，因为所有 'longtap' 事件也应该跟随 'click' 事件。

在这种情况下，代码如下：

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
});

【讨论】：