菜单

澳门太阳娱乐手机登录js实现滑动触屏事件监听的方法_javascript技巧_脚本之家

2020年3月1日 - 澳门太阳娱乐手机登录

本文实例叙述了js达成滑动触屏事件监听的格局。分享给大家供大家仿效。具体达成方式如下:

function span_move_fun(){ var span = document.getElementById; var span_left = $.left; var span_top = $.top; var start_left = $.left; var start_top = $.top; span.addEventListener('touchstart', function { event.preventDefault(); if (event.targetTouches.length == 1) { var touch = event.targetTouches[0]; span.style.position = "absolute"; span_top = $.top; span_left = $.left; start_top = touch.pageY start_left = touch.pageX var left = parseFloat(touch.pageX - start_left + span_left-30); var top = parseFloat(touch.pageY - start_top + span_top-73); span.style.left = String + 'px'; span.style.top = String; span.addEventListener('touchmove', function { event.preventDefault(); if (event.targetTouches.length == 1) { var touch = event.targetTouches[0]; span.style.position = "absolute"; var left = parseFloat(touch.pageX - start_left + span_left-30); var top = parseFloat(touch.pageY - start_top + span_top-73); span.style.left = String + 'px'; span.style.top = String; span.addEventListener('touchend', function { var touch = event.changedTouches[0]; if(parseFloat(touch.pageX - start_left + span_left-30) <= -5 || parseFloat(touch.pageX - start_left + span_left-30) >= 620 || parseFloat(touch.pageY - start_top + span_top-73) <= -38 || parseFloat(touch.pageY - start_top + span_top-73) >= 587){ span.style.left = String + 'px'; span.style.top = String + 'px'; } event.stopPropagation;}

js的左右滑行触屏事件,首要有四个事件:touchstart,touchmove,touchend。那五个事件最根本的本性是
pageX和 pageY,表示X,Y坐标。

touchstart在触摸最初时接触事件

touchend在触摸甘休时接触事件

touchmove那些事件相比古怪,按道理在触摸到进度中穿梭振作振作那一个事件才对,可是在本人的
Android 1.5 中,在 touchstart 激发后激情一遍,然后剩余的都和 touchend
大约同一时候激情。

这八个事件都都有一个 timeStamp 的个性,查看 timeStamp
属性,能够看来各样是 touchstart -> touchmove ->touchmove -> …
-> touchmove ->touchend。

document.getElementsByTagName_r[0].addEventListener('touchstart',function{ nStartY = e.targetTouches[0].pageY; nStartX = e.targetTouches[0].pageX;});document.getElementsByTagName_r[0].addEventListener('touchend',function{ nChangY = e.changedTouches[0].pageY; nChangX = e.changedTouches[0].pageX;});

PS:1.
touch事件跟click事件是不会被同期触发的。未来的移位设备做的相比较好,已经把那些题目周密的制止掉了。

  1. 瞩目触摸的始发和得了地点的移位大小。假诺位移小过小应该不做别的动作。

PS:这里再为我们提供八个关于JS事件的在线工具,归结计算了JS常用的事件类型与函数功用:

javascript事件与效果与利益表达大全:

但愿本文所述对大家的javascript程序设计具备利于。

相关文章

发表评论

电子邮件地址不会被公开。 必填项已用*标注

网站地图xml地图