一个月没写博客了,感觉空唠唠的,有多好想写的,今天全都给补上吧,记录最近这个月的收获

https://blog.csdn.net/sinat_19327991/article/details/73823874

关于dom 的 触摸事件

首先说关于Dom Event : 标识在DOM 中发生的任何事件

如何使用:

1.注册监听器

1.dom.addEventListener('click', function(){alert('Hello world');}, false);

// 参数:1. 事件类型 2.回调函数 3.冒泡 false/捕获 true (冒泡与捕获自行百度)

2. <button onclick="test();">

function test(){
// event 返回值特殊处理后的可以直接使用
event.preventDefault()
} 3. dom.onclick = function(event){alert('Hello world');};

2.调用event 的方法或者属性 (可参考 https://developer.mozilla.org/zh-CN/docs/Web/API/Event

关于属性与方法就不多说了,用的比较多的方法(或者见的比较多的):

注意的一点是event.cancelable ” 如果该事件的 cancelable 属性为 false, 则该事件的监听器无法阻止默认行为, 调用 preventDefault将产生错误“”)

1.preventDefault:

取消默认要做的事情,比如说你在写了一个checkbox,如果你监听了click方法并且在该方法用调用了preventDefault,那么就会阻止默认行为,或者你可以在你的监听方法里加上别的操作~比如alert一下 ~

2.stopPropagation:

阻止事件继续传播(冒泡、捕获)

比如:(样式啥的就不写了,能看明白就好)

<div onclick="test1()">
<div onclick="test2()">
</div>
</div>

点击里层的div 会发生test2事件,默认是冒泡,然后test1 也会执行,如果我们在test2 方法中加入stopPropagation ,那么test1 就不会执行,也就是不会传到test1。

言归正传:TouchEvent

也就是触摸事件(主要跟移动端比较匹配)

下面这段话摘自MDN:

TouchEvent 是一类描述手指在触摸平面(触摸屏、触摸板等)的状态变化的事件。这类事件用于描述一个或多个触点,使开发者可以检测触点的移动,触点的增加和减少,等等。

每 个 Touch 对象代表一个触点; 每个触点都由其位置,大小,形状,压力大小,和目标 element 描述。 TouchList 对象代表多个触点的一个列表.

也就是说touch 会返回一个list,触点数。

touch类型分为touchstart、touchmove、touchend、touchcancel

也就是开始、移动、结束、取消(取消用的可能比较少,主要是遇到某个某个插队导致中断等等)

直接上代码:下面是转载域 CSDN 豆i浆 的博文:

function load (){ document.addEventListener('touchstart',touch, false); document.addEventListener('touchmove',touch, false); document.addEventListener('touchend',touch, false); function touch (event){ var event = event || window.event; var oInp = document.getElementById("inp"); switch(event.type){ case "touchstart": oInp.innerHTML = "Touch started (" + event.touches[0].clientX + "," + event.touches[0].clientY + ")"; break; case "touchend": oInp.innerHTML = "<br>Touch end (" + event.changedTouches[0].clientX + "," + event.changedTouches[0].clientY + ")"; break; case "touchmove": event.preventDefault(); oInp.innerHTML = "<br>Touch moved (" + event.touches[0].clientX + "," + event.touches[0].clientY + ")"; break; } } } window.addEventListener('load',load, false); 

https://blog.csdn.net/sinat_19327991/article/details/73823874

其实,一般情况下,我们都是想得到的就是touch list 也就是touchEvent.touches

touch对象的属性(常用):

1. screenX : 触点相对于屏幕左边沿的的X坐标

2.screenY:触点相对于屏幕上边沿的的Y坐标

3.clientX:触点相对于可见视区(visual viewport)左边沿的的X坐标. 不包括任何滚动偏移

4.clientY:触点相对于可见视区(visual viewport)上边沿的的Y坐标. 不包括任何滚动偏移

5.pageX:触点相对于HTML文档左边沿的的X坐标. 当存在水平滚动的偏移时, 这个值包含了水平滚动的偏移

6.pageY:触点相对于HTML文档上边沿的的Y坐标. 当存在垂直滚动的偏移时, 这个值包含了垂直滚动的偏移.

7.force:手指挤压触摸平面的压力大小, 从0.0(没有压力)到1.0(最大压力)的浮点数.

8.target:当这个触点最开始被跟踪时(在 touchstart 事件中), 触点位于的HTML元素.

用的比较多的可能就是clientX,clientY了吧~ 获取可见区域的坐标,然后记录start 的坐标在move和end时进行相关操作~

如果有兴趣的或者想更深入了解的同学可以去MDN 查找相关资料~

JS touch的更多相关文章

  1. Zepto.js touch模块深入分析

    目的:记录 Zepto.js touch模块 源码阅读 源码: // Zepto.js // (c) 2010-2015 Thomas Fuchs // Zepto.js may be freely ...

  2. H5 适配 动画animation js touch

    图片预加载jquery插件 jquery.imgpreload var load_img = [];load_img.push('http://m.pubuzhixing.com/Images/vot ...

  3. js Touch事件(向左滑动,后退)

    js Touch事件(向左滑动,后退) 代码如下 var touch_p = { c_x : 0, c_y : 0, hasbacked : false }; function touches(ev) ...

  4. js touch触屏原理分析

    之前我们做过许多触屏的特效,那么,今天,我们来分析下js的触屏原理.事实上,大家百度一下js touch基本上可以找到这文章“指尖下的js ——多触式web前端开发之一:对于Touch的处理”,我想这 ...

  5. 《.NET最佳实践》与Ext JS/Touch的团队开发

    概述 持续集成 编码规范 测试 小结 概述 有不少开发人员都问过我,Ext JS/Touch是否支持团队开发?对于这个问题,我可以毫不犹豫的回答:支持.原因是在Sencha官网博客中客户示例中,有不少 ...

  6. web & js & touch & gesture

    web & js & touch & gesture 触摸 & 手势 https://caniuse.com/#feat=touch js https://develo ...

  7. js & touch & swiper

    js & touch & swiper https://developer.mozilla.org/en/docs/Web/API/Touch_events "use str ...

  8. js & touch & pull down & load more

    js & touch & pull down & load more https://www.jianshu.com/p/93597d6bd77d index-list htt ...

  9. 关于js touch事件 的引用设置

    一开始做前端页面的时候,接触的也是js,但是随后便被简单高效的jquery吸引过去,并一直使用至今. 而js,则被我主观的认为底层技术而抛弃. 直到这几天工作需要,研究移动端页面的触屏滑动事件,搜索j ...

  10. 移动端 js touch事件

    随着智能手机和平板电脑的普及, 越来越多的人用移动设备浏览网页,我们平时在pc浏览器上用的鼠标事件,比如:click, mouseover等, 已经无法满足移动设备触摸屏的特点,触摸时代的到来,离不开 ...

随机推荐

  1. javaweb项目中的过滤器的使用

    翻阅博客园的的时候,看到两篇关于javaweb过滤器的帖子写的很好,这里备忘一下: 过滤器基础:http://www.cnblogs.com/xdp-gacl/p/3948353.html 获取器案例 ...

  2. 【disruptor】2、disruptor中生产者线程与消费者之间的协调

    由于ringbuffer是一个环形的队列,那么生产者和消费者在遍历这个队列的时候,如何制衡呢? 1.生产快,消费慢,数据丢失? 生产者速度过快,导致一个对象还没消费完,就循环生产了一个新的对象要加入r ...

  3. Vue2.5开发去哪儿网App 城市列表开发

     一,城市选择页面路由配置                                                                                        ...

  4. Oracle 扩展表空间大小的几种方式

    环境:windows操作系统 增加表空间大小的四种方法Meathod1:给表空间增加数据文件 ALTER TABLESPACE app_data ADD DATAFILE 'D:\ORACLE\PRO ...

  5. 使用libcurl的正确姿势

    libcurl支持访问http.ftp等各种服务器,下载图片AV什么的不在话下.但其存在多种接口,异步接口也很难以理解,到底什么样的使用姿势才是正确滴?我们来看看可用的体位: easy interfa ...

  6. Django F()表达式

    Django F()表达式 一个F()对象代表一个模型字段的值或注释列.使用它可以直接引用模型字段的值并执行数据库操作而不用把它们导入到python的内存中. 相反,Django使用F()对象生成一个 ...

  7. Hadoop2源码分析-序列化篇

    1.概述 上一篇我们了解了MapReduce的相关流程,包含MapReduce V2的重构思路,新的设计架构,与MapReduce V1的区别等内容,今天我们在来学习下在Hadoop V2中的序列化的 ...

  8. TCP滑动窗口

    TCP利用滑动窗口实现流量控制基本的数据单位不是数据段,而是字节 滑动窗口本质上是描述接受方(本地)的TCP数据报缓冲区大小的数据,发送方根据这个数据来计算自己最多能发送多长的数据.如果发送方收到接受 ...

  9. TCP保活的必要性

    TCP的长连接理论上只要连接建立后,就会一直保持着.但有时有一些防火墙之类的软件会自动检查主机的网络连接状况,比如说如果发现某个连接在几分钟之内都没有数据通讯,则会关闭这个连接.有时客户端与服务器需要 ...

  10. 《Netty权威指南》(一)走进 Java NIO

    目录 1.1 I/O 基础入门 1.1.1 Linux 网络 I/O 模型 1.1.2 I/O 多路复用技术 2. Java 的 I/O 演进   1.1 I/O 基础入门 Java1.4 之前的早期 ...