Javascript 检测touchmove事件何时超出目标并重新启动
我正在用HTML/CSS/JS构建类似Facebook的反应系统。我正试图实现类似的触摸效果,就像在Facebook上为手机用户提供的一样。所以我想让用户通过在反应之间滑动手指来选择反应,并在他们想要的反应释放时做出反应。为此,我使用了Javascript 检测touchmove事件何时超出目标并重新启动,javascript,jquery,touch-event,touchstart,touchmove,Javascript,Jquery,Touch Event,Touchstart,Touchmove,我正在用HTML/CSS/JS构建类似Facebook的反应系统。我正试图实现类似的触摸效果,就像在Facebook上为手机用户提供的一样。所以我想让用户通过在反应之间滑动手指来选择反应,并在他们想要的反应释放时做出反应。为此,我使用了touchstart、touchmove和touchend事件。问题是,我想检测用户何时将手指滑出重新启动touchmove事件的反应,以进行下一个反应。我能够检测到,但无法重新启动touchmove事件,因为它导致错误uncaughttypeerror:无法读取
touchstart
、touchmove
和touchend
事件。问题是,我想检测用户何时将手指滑出重新启动touchmove
事件的反应,以进行下一个反应。我能够检测到,但无法重新启动touchmove
事件,因为它导致错误uncaughttypeerror:无法读取未定义的属性“touchs”。所以最终的效果应该是,当用户开始触摸“喜欢”并在“哈哈”上滑动手指并释放时,它应该在“哈哈”而不是“喜欢”上做出反应
这是我的HTML:
<div class="reactions">
<div class="reactions_item -like">Like</div>
<div class="reactions_item -love">Love</div>
<div class="reactions_item -care">Care</div>
<div class="reactions_item -haha">Haha</div>
<div class="reactions_item -wow">Wow</div>
<div class="reactions_item -sad">Sad</div>
<div class="reactions_item -angry">Angry</div>
</div>
我建议您应该使用“mousedown”和“mouseup”js事件。
参考文献
有关更多信息,请查看下面的链接。
为什么要使用“mousedown”和“mouseup”事件?优势是什么?我只想在触摸设备上使用这个功能。好吧,如果你想使用“touchmove”和“touchstart”,那么像下面这样使用var reaction=jQuery('.reactions_item');reaction.addEventListener('touchstart',event=>{//touch event started})
var reaction = jQuery('.reactions_item');
var touchOffset;
reaction.on('touchstart', function(e) {
e.preventDefault();
var touchEvent = e.originalEvent.touches[0] || e.originalEvent.changedTouches[0];
touchOffset = document.elementFromPoint(touchEvent.pageX,touchEvent.pageY);
console.log('touch started');
});
reaction.on('touchmove', function(e) {
e.preventDefault();
var touchEvent = e.originalEvent.touches[0] || e.originalEvent.changedTouches[0];
if (touchOffset !== document.elementFromPoint(touchEvent.pageX,touchEvent.pageY)) {
reaction.off('touchmove');
reaction.trigger('touchmove');
console.log('finger is out of current element and should restart touchmove for next element');
}
});
reaction.on('click tap touchend', function(e) {
console.log('touch released and should react');
});