移动端事件总结

最新推荐文章于 2020-09-29 23:58:34 发布
最新推荐文章于 2020-09-29 23:58:34 发布
阅读量316 收藏
点赞数
分类专栏： 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/dtbk123/article/details/106615802
版权

1.触摸事件

touchstart:当手指触摸屏幕时触发

touchmove:当手指在屏幕上滑动触发

touchend:当手指离开屏幕时触发

touchcancel:当系统停止追踪触摸时触发

事件触发时会传递给函数一个Event对象，事件相关信息都会存储在event，event包含的信息主要有：

touches:表示当前跟踪的触摸操作touch对象的集合

targetTouches:当前事件目标上touch对象的集合

changeTouches：表示至上次触摸发生改变的touch对象的集合

每个对象包含的信息有

clientX：触摸目标在视口中的x坐标

clientY：触摸目标在视口中的y坐标

pageX：触摸目标在页面中的x坐标

pageY:触摸目标在页面中的y坐标

screenX:触摸目标在屏幕中的x坐标

screenY：触摸目标在屏幕中的y坐标

target：触摸的dom节点

2.手势事件

gesturestart：当手势开始（有两根或多根手指触摸屏幕）时触发

gesturechange：手势改变（有两根或多根手指触摸屏幕，且发生移动）时触发

gestureend：手势结束（倒数第二根手指离开）时触发

手势事件除了screenX，pageX等，还包括scale，rotation

3.传感器事件

deviceorientation：提供设备的物理方向信息

devicemotion：提供设备的加速信息

orientationchange：提供设备的旋转信息

渣渣前端
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
移动端基础事件总结与应用
08-31
本文主要介绍了移动端基础事件总结与应用，具有一定的参考价值，下面跟着小编一起来看下吧
移动端常见事件 总结
超级婷
03-06 2908
原生 touch触摸事件，是一组事件; 包括： touchstart: 当手指触摸屏幕的时候出发 touchmove： 当手指在屏幕移动的时候 touchend： 手指离开屏幕的时候触发 touchcancel: 当被迫中止滑动的时候触发（弹消息，来电等等）； 1. 原生js绑定事件： window.onload = function(){ var box = docume...
【H5】 移动端的基本事件
舜岳的博客
06-15 5808
【H5】 移动端的基本事件： 一、基础事件 1、PC端事件 onclick 鼠标点击触发 onmousedown 鼠标按下触发 onmousemove 鼠标移动触发 onmouseup 鼠标抬起触发 2、移动端触屏事件 ontouchstart 手指按下触发 ontouchmove 手指移动触发 onTouchend 手指抬起触发 3、PC端事件和移动端事件的区别 通...
web移动端事件总结
js_Allen的专栏
10-07 2146
参考文章： 在手持设备上使用 touchstart 事件代替 click 事件是不是个好主意 移动端兼容问题研究 javascript事件机制详解（涉及移动兼容） 读fastclick源码有感 彻底解决tap“点透”，提升移动端点击响应速度 实现一个移动端TODO应用，想添加一些触摸事件，之前无论PC还是移动端，都统一用click，现在细思恐极啊~~。一时半会想不出更好的实现方案，于是找了很
移动端事件基础总结
youhebuke225的博客
05-31 278
目录移动端事件总结1. click2. touch事件模型3. TouchEvent3.1 触摸相关属性3.2 触摸事件坐标 移动端事件总结 1. click click事件在移动端使用是会有300ms左右的延迟，但是可以通过第三方的库进行解决 详情点击 2. touch事件模型 共四种:只在移动端触发 touchstart:手指触摸到屏幕会触发 touchmove:当手指在屏幕上移动时，会触发 touchend:当手指离开屏幕时，会触发 touchcancel:可由系统进行的触发,一些更高级别的事件发生
第7章 上机1
qq_36074058的博客
10-19 356
无标题文档 li { color: #CCC; list-style-type: none; width:100px; float:left; background-color: #333; text-align: center; } div{width:870px; border: thin solid #666; } a,a:hover{
京东移动端自适应布局外加总结
08-28
京东商城移动端的自适应布局,用了h5标签和css3的一些属性,iscroll屏幕滑动插件,还有移动端touch触摸屏事件使用。
vue实现移动端悬浮窗效果
12-08
本文讲述，在使用VUE的移动端实现类似于iPhone的悬浮窗的效果。 相关知识点 touchstart 当在屏幕上按下手指时触发 touchmove 当在屏幕上移动手指时触发 touchend 当在屏幕上抬起手指时触发 mousedown mousemove ...
JQuery事件委托(适用于给动态生成的脚本元素添加事件)
11-21
移动端遇到一个项目，是一个列表的侧滑栏，在我这里用jq写的交互事件。自测各方面都挺好的，美滋滋的给了研发。研发也美滋滋的开始开发。 但是，好景不长。。。 研发加了ajax事件后，我的交互效果有部分受了影响！ ...
JS针对浏览器窗口关闭事件的监听方法集锦
11-22
本文实例总结了JS针对浏览器窗口关闭事件的监听方法。分享给大家供大家参考，具体如下： 方式一：(适用于IE浏览器，而且刷新不提示，只在点击浏览器关闭按钮的时候提示) [removed] [removed]=onclose; function ...
jquery练习(一)
iteye_8029的博客
09-14 105
<!doctype html> <html> <head> <meta charset="utf-8"> <script src="../js/libs/jquery-1.6.2.min.js"></script> </head> &a
同一个盒子，同时绑定事件冒泡与事件捕获两个事件
xiaoxiaofly的博客
09-23 671
当同一个容器绑定两个事件，遵循先捕获，后冒泡 ，有一个前提是点击的事件先执行 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial...
vue实现淡入淡出
dtbk123的博客
08-02 8503
直接看代码 <template> <div class="pic"> <ul class="tu"> <transition-group name="img"> <li v-for="(item,index) in pic" :key="index" v-show="i...
vue异步请求数据重新渲染
dtbk123的博客
08-08 7585
vue异步请求数据时往往不能及时更新，下面介绍一种方法解决。 export default { name: "pic", created() { this.getList(); }, data(){ return{num:[]} }, methods:{...
h5实现图片预览
dtbk123的博客
06-25 3458
h5有两种方法可以实现图片的预览，即任意的图片到指定的区域，图片会显示出来。 第一种： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>测试</title> <style> *{marg...
React高阶组件Hook
dtbk123的博客
09-29 3145
Hook是react16.8新增的，它可以让你在不编写class的情况下使用state以及其他react特性。 Hook特点①使你在无需修改组件的情况下复用状态逻辑②可将组件中互相关联的部分拆分成更小的函数，复杂组件将更容易理解③更简洁，更容易理解的代码 先来看个例子 import React,{useState} from 'react' export function Hook(){ ...
react实现淡入淡出
dtbk123的博客
02-04 3093
首先要下载一个库，即npm ireact-addons-css-transition-group,接下来看代码 //Pic.js import React,{Component} from 'react' import Img1 from '../../image/1.jpg' import Img2 from '../../image/2.jpg' import Img3 from '....
vue3实现虚拟列表
dtbk123的博客
09-29 3031
vue3.0发布了，刚好学习一下，仿照网上案例写了一个虚拟列表 <template> <div class='virtual' @scroll="scroll" :style="{height:400+'px'}"> {{itemHeight}} <div class="list" :style="{height:dataLengh*itemHeight+'px'}"> <ul :style="{'
react封装日历组件
dtbk123的博客
03-07 2191
import React, { Component } from 'react' import './calendar.css' export default class Form extends Component { constructor(props) { super(props) this.state = { year: [...
element plus移动端
最新发布
08-26
Element Plus 是一个基于 Vue.js 的组件库，用于构建用户界面。它是对 Element UI 的升级和拓展，提供了更好的移动端适配。 Element Plus 在移动端的适配方面做了一些优化，如更加友好的触摸交互、更小的体积、更高的性能等。它提供了一套移动端的样式和组件，可以方便地在移动端项目中使用。 你可以通过引入 Element Plus 的 CSS 和 JS 文件来使用它的组件。在移动端项目中，你可以根据需要选择使用响应式布局或者使用移动端专属的样式和组件。 需要注意的是，Element Plus 只提供了基础的移动端适配，具体的样式和布局仍然需要根据项目的需求进行定制和调整。同时，在移动端开发中还需要考虑一些特殊的问题，比如触摸事件、页面适配等。 总结起来，Element Plus 提供了一套方便在移动端使用的样式和组件，但具体的移动端适配还需要根据项目需求进行定制。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值