html 触摸屏页面,HTML5触摸屏touch事件使用实例1

爱被打了一巴掌 2022-10-06 05:45 285阅读 0赞

1.源码：

.divFixed \{

width: 100px;

height: 100px;

font-size: 15px;

text-align: center;

border: 2px solid red;

position: fixed;

var divOne = document.getElementById('divOne');

var isMove = false;

var oldX = oldY = 0;

divOne.addEventListener('touchstart', function (e) \{

if (e.targetTouches.length == 1) \{

var touch = e.targetTouches\[0\];

isMove = true;

oldX = touch.pageX;

oldY = touch.pageY;

divOne.style.background = "gray";

\}, false);

divOne.addEventListener('touchmove', function (e) \{

if (e.targetTouches.length == 1) \{

var touch = e.targetTouches\[0\];

if (isMove) \{

var curX = touch.pageX;

var curY = touch.pageY;

divOne.style.left = divOne.offsetLeft + (curX - oldX) + 'px';

divOne.style.top = divOne.offsetTop + (curY - oldY) + 'px';

oldX = curX;

oldY = curY;

//禁用默认操作

e.preventDefault();

\});

divOne.addEventListener('touchend', function (e) \{

if (e.changedTouches.length == 1) \{

var touch = e.changedTouches\[0\];

isMove = false;

oldX = oldY = 0;

divOne.style.background = "transparent";

\}, false);

//禁止整个页面触屏，而移动(如：QQ浏览器的页面左右切换)

window.addEventListener('touchmove', function (e) \{

e.preventDefault();

\}, false);

2.显示结果：

![1c83027308c849d99004ae41dcc8bf05.png][]

HTML5触摸屏touch事件使用介绍1

市面上手机种类繁多,在触屏手机上运行的网页跟传统PC网页相比还是有很大差别的.由于设备的不同浏览器的事件的设计也不同.传统PC站的 click 和 onmouseover 等事件在一般触屏的手机上也可 ...

zepto&period;js 处理Touch事件(实例)

处理Touch事件能让你了解到用户的每一根手指的位置,在touch事件触发的时候产生,可以通过touch event handler的event对象取到,如果基于zepto.js开发,一般是通过eve ...

HTML5的touch事件

HTML5中新添加了很多事件,但是由于他们的兼容问题不是很理想,应用实战性不是太强,所以在这里基本省略,咱们只分享应用广泛兼容不错的事件,日后随着兼容情况提升以后再陆续添加分享.今天为大家介绍的事件主 ...

html5之touch事件

前言 一个触屏网站到底和传统的pc端网站有什么区别呢,交互方式的改变首当其冲.例如我们常用的click事件,在触屏设备下是如此无力. 手机上的大部分交互都是通过touch来实现的,于是,对于触屏的交互 ...

html5 touch事件实现触屏页面上下滑动&lpar;二&rpar;

五一小长假哪都没去,睡了三天,今天晕晕沉沉的投入工作了,但还是做出了一点点效果 上周用html5的touch事件把简单的滑动做出来了,实现了持续页面上下滑动的效果,参考之前 的文章及代码html5 t ...

html5 touch事件实现触屏页面上下滑动&lpar;一&rpar;

最近做的做那个app的项目由于用overflow:hidden导致了很多问题,于是决定研究下html5的touch事件.想找个全面点的帖子真是难死了,虽然好多关于html5 touch的文章但大多都是 ...

通过html5 touch事件封装手势识别组件

html5移动端新增了touchstart,touchmove,touchend事件,利用这3个事件,判断手指的点击和划动轨迹,我们可以封装各种手势的识别功能, 这3个事件和pc端的mousedown ...

Android Touch事件原理加实例分析

Android中有各种各样的事件,以响应用户的操作.这些事件可以分为按键事件和触屏事件.而Touch事件是触屏事件的基础事件,在进行Android开发时经常会用到,所以非常有必要深入理解它的原理机制. ...

javascript——touch事件介绍与实例演示

分类: javascript2014-02-12 16:42 1742人阅读 评论(0) 收藏 举报 touch事件touchmovetouchstarttouchend 前言 诸如智能手机和平板 ...

随机推荐

map erase iterator

错误写法: map m; for (map::iterator it = m.begin(); it != m.end(); it++) ...

ubuntu 15&period;04 联网提示&colon;wifi已通过硬件开关禁用

执行以下命令: echo "options asus\_nb\_wmi wapf=4"| sudo tee /etc/modprobe.d/asus\_nb\_wmi.conf 重启

用Navicat连接Oracle数据库时报错ORA-28547&colon;connection to server failed&comma;probable Oracle Net admin error

用Navicat连接Oracle数据库时出现如下错误 上网一查原来是oci.dll版本不对.因为Navicat是通过Oracle客户端连接Oracle服务器的,Oracle的客户端分为两种,一种是标准 ...

微信公众平台开发&lpar;免费云BAE&plus;高效优雅的Python&plus;网站开放的API&rpar;

虽然校园App是个我认为的绝对的好主意,但最近有个也不错的营销+开发的模式出现:微信平台+固定域名服务器. 微信公众平台的运行模式不外两个: 一.机器人模式或称转发模式,将说话内容转发到服务器上完成, ...

javascripte (三) 改变html图像

Spring源深和六系列 CreateBean过程

blog宗旨:用图说话. 这一章的图讲述了createBean的过程.到这里spring容器就能够完毕IOC的整个过程,拿到我们须要的对象. 下一章我们接着来看一看AOP完毕的过程. 附:文件夹 Sp ...

01--css编码技巧--css揭秘

一 尽量减少代码重复 1.按钮 \#btn \{ padding: .3em .8em; border: 1px solid \#446d88; background: \#58a linear-gradie ...

python3图像识别库安装与使用

pytesseract库的安装 因为用的win10,就直说windows上面的安装了.其实就是pip安装就完事了. $ pip install pytesseract 安装了这个还不算完,得安装Tes ...

Java中类的线程安全问题

java中各种集合(字符串类)的线程安全性!!! 一.概念: 线程安全:就是当多线程访问时,采用了加锁的机制:即当一个线程访问该类的某个数据时,会对这个数据进行保护,其他线程不能对其访问,直到该线程读 ...

XSL自定义函数

利用微软的XSL的继承特性,用户可以自定义XSL函数.基本原理是用户写的脚本代码写在msxsl中,并设置这部分msxsl继承到用户自定义空间中,那么用户就可以通过用户自定义空间使用msxsl中的脚本代 ...

[1c83027308c849d99004ae41dcc8bf05.png]: /images/20221005/c8d42b8325924e7bb8ab43356005ecf2.png

html 触摸屏页面,HTML5触摸屏touch事件使用实例1

发表评论取消回复

还没有评论，来说两句吧...

相关阅读

相关触摸屏事件坐标获取编程指南

相关西门子触摸屏函数翻译_触摸屏的中英文切换怎么做？

相关【Android每周专题】触摸屏事件

相关触摸屏

相关 linux模拟触摸屏,Android 【真机】与【模拟器】触摸屏事件的模拟差异分析

相关 html按键使用touch,HTML touchstart事件用法及代码示例

相关 html 触摸屏页面,HTML5触摸屏touch事件使用实例1

相关电脑触摸屏上的鼠标事件触发

相关 HTML5触摸事件touch

相关 HTML5事件—visibilitychange 页面可见性改变事件