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

对于移动设备，没有像右键单击的操作 - 所以我想要为此处理长按操作。jQuery：防止点击事件被长时间点击后触发（移动）

我还需要一个正常的“点击”事件。

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

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

这里是代码+例如：

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(){ 
 
\t alert("click"); 
 
})

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

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

来源

2016-08-24 Kryptur

有很多插件可以处理它，为什么要发明轮子？ – Tomer

可以使用contextmenu右单击事件：

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

~~当你长按用手指你的移动设备，然后上下文菜单将出现。~~

来源

2016-08-24 09:13:29 Lucy

谢谢，在这种情况下，我忘记使用e.preventDefault（），因此浏览器（Android版Chrome）消耗事件并以某种方式中断代码（出现文本选择）。当使用e.preventDefault（）时，它就像一个魅力;）如果你更新你的答案，我会接受它 – Kryptur

实在是做这样的事情没有什么好办法，你可以做的是测试如果已登记在事件目标的单击事件处理程序longtap事件：

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

    ... 
});

在一般情况下，我觉得你的一般方法应该重新考虑实现用于触摸屏设备的上下文菜单。

祝你好运！

来源

2016-08-24 09:16:25

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

回答

相关问题