4

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

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

4

3 回答 3

6

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

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

于 2013-02-14T14:13:04.037 回答
1

您可以为此使用超时：

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);
});
于 2013-02-14T14:04:35.890 回答
0

所有解决方案均不适用于桌面浏览器。您还应该调整 '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
});
于 2020-01-09T11:50:38.917 回答