Question

对于移动设备，没有像右击一样的操作 - 所以我想为此处理长按。

我还需要正常的＆＃34;点击＆＃34;事件

对于长按处理，我找到了一个解决方案，但是当我添加一个onClick-listener时，即使我只想要触发长按事件，onClick也会被触发。

如何在longTap事件触发时阻止点击事件？

以下是Code +示例：

＆＃13;

var c = console.log.bind(console);

(function() {
    $.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);
            });
        });
    };
})(jQuery);

$('.long-tap').longTap({
    delay: 1000, // really long tap
    onRelease: function(e) {
        c($(this).position(), e);
        e.stopImmediatePropagation();
        e.preventDefault();
        alert('show context menu or something else:');
    }
});

$('.long-tap').click(function(){
	alert("click");
})

＆＃13;

.test {
    width: 200px;
    height: 100px;
    background-color: #DDD;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="test long-tap"></div>

＆＃13;

Answer 1

您可以使用contextmenu进行右键点击事件：

$(document).on("contextmenu",function(e){
   e.preventDefault();
   // do the stuff
});

~~当您用手指长按移动设备时，将出现上下文菜单。~~

Answer 2

真的没有办法做这样的事情，你可以做的是测试longtap事件是否在click事件处理程序的事件目标上注册：

$('.long-tap').click(function(){
    if ($(this).data('touchstart')) {
        return;
    }

    ...
});

一般来说，我认为应重新考虑实施触摸屏设备上下文菜单的一般方法。

祝你好运！

jQuery：防止点击事件在长时间点击后触发（移动）

2 个答案: