首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

HTML5移动端开发常用触摸事件

HTML5移动端开发常用触摸事件 h5开发手机端是经常会有触摸事件和滑动事件 HTML5中新添加了很多事件,但是由于他们兼容问题不是很理想,应用实战性不是太强,所以在这里基本省略...在iPhone 3Gs发布时候,其自带移动Safari浏览器就提供了一些与触摸(touch)操作相关事件。随后,Android上浏览器也实现了相同事件。...(返回当事件被触发时,鼠标指针水平坐标)、clientY(返回当事件触发时,鼠标指针垂直坐标)、screenX(当某个事件被触发时,鼠标指针水平坐标)和screenY(返回当某个事件被触发时,鼠标指针垂直坐标...每个触摸点由包含了如下触摸信息(常用): identifier:一个数值,唯一标识触摸会话(touch session)中的当前手指。...radiusX/radiusY/rotationAngle:画出大约相当于手指形状椭圆形,分别为椭圆形两个半径和旋转角度。初步测试浏览器不支持,好在功能不常用,欢迎大家反馈。

1.6K10
  • 您找到你想要的搜索结果了吗?
    是的
    没有找到

    常用键盘事件

    1.1常用键盘事件 1.1键盘事件 事件除了使用鼠标触发,还可以使用键盘触发, 注意给文档 document 添加键盘事件 注意:    onkeypress 和前面2个区别是,它不识别功能键...三个事件执行顺序 keydown -> keypress -> keyup // 常用键盘事件 //1. keyup 按键弹起时候触发...三个事件执行顺序 keydown -- keypress -- keyup 1.2 键盘事件对象 注意:         1. ...我们keyup 和 keydown 事件不区分大小写 a 和 A 得到都是65       2.我们keypress 事件区分大小写  a 97 和 A 得到是65    3.onkeydown...4.键盘事件对象中keyCode属性可以得到相应键ASCLL码值 使用keyCode属性判断用户按下哪个键 // 键盘事件对象中keyCode属性可以得到相应键

    3.1K10

    HTML5常用文本标签

    来讲,这意味着段落可以在任何有合适文本流地方出现,例如文档主体中、列表元素里,等等 例子: 这是一个段落 br和wbr标签   标签目的是输入空行,不是为了换行; <...例如磁盘用量、查询结果相关性即可使用 常用属性是: 属性 描述 max 规定范围最大值。...value="0.5">50% 标签 用来表示现在进度 ;常用属性有 属性 描述 max 规定任务一共需要多少工作。...font-style 定义元素字体风格,如设置斜体、倾斜或正常字体 常用属性为normal(默认值),italic(斜体),oblique(倾斜) word-wrap 允许长单词或 URL 地址换行到下一行...常用属性:   normal 只在允许断字点换行(浏览器保持默认处理)。

    10.4K11

    vue 常用事件

    vue 常用事件 事件处理 1.使用 v-on:xxx 或 @xxx 绑定事件,其中 xxx 是事件名; 2.事件回调需要配置在 methods 对象中,最终会在 vm 上; 3.methods...); ​ 3.once:事件只触发一次(常用); ​ 4.capture:使用事件捕获模式; ​ 5.self:只有 event.target 是当前操作元素时才触发事件; ​ 6.passive...:事件默认行为立即执行,无需等待事件回调执行完毕; 1.prevent:阻止浏览器默认事件常用) 什么是浏览器默认事件呢?...弹出框提示 说明prevent修饰符 发生了作用 阻止了浏览器默认事件调用 2.stop:阻止事件冒泡(常用) 直接上代码 可以看到 给div和 button和设置了点击事件 那么 stop:阻止事件冒泡到底是啥呢...执行效果 3.once:事件只触发一次(常用) 字面意思 只触发一次 代码 这是我们已点击多次结果 4.capture:使用事件捕获模式 所有的操作 点击都是 最里面的儿子

    20310

    常用鼠标事件

    1.常用鼠标事件 1.1 案例:禁止选中文字和禁止右键菜单 1.禁止鼠标右键菜单 contextmenu主要控制应该何时显示上下文菜单,主要用于程序员取消默认上下文菜单 document.addEventListener...event对象代表事件状态,跟事件相关一系列信息集合。...现阶段我们主要是用鼠标事件对象 MouseEvent 和键盘事件对象 KeyboardEvent。...,使用鼠标移动事件: mousemove ② 在页面中移动,给document注册事件 ③ 图片要移动距离,而且不占位置,我们使用绝对定位即可 ④ 核心原理: 每次鼠标移动,我们都会获得最新鼠标坐标,...// 2.核心原理: 每次鼠标移动,我们都会获得最新鼠标坐标, // 把这个x和y坐标做为图片top和left 值就可以移动图片

    3.2K10

    HTML5绘画与拖放事件

    HTML5绘画 在html5中出现了许多新特性,绘画功能就是其中之一。由于html5新增这些新特性,所以也在逐渐取代Flash,毕竟Flash比较占用内存,也经常性奔溃。...html5不仅能制作2d绘画还能做3d绘画,但是要注意是这两者使用函数不一样但都基于canvas。在网络上我们可以搜索到一些使用html5制作2D或3D效果图,例如: ? ? ?...如何使用html5进行绘画: 由于我们是做后端开发,所以在这里只简单介绍一下html52D绘画,绘画制作都是基于canvas标签,所以先介绍一下canvas标签: canvas是一个画布,这个画布通常是一个矩形区域...拖放事件 拖放是一种常见特性,即抓取对象以后拖到另一个位置。在 HTML5 中,拖放是标准一部分,任何元素都能够实现拖放。...ondragover事件: ondragover 事件会在被别的元素触碰到时触发,通过这个事件事件源对象,可以设置在何处放置被拖动元素。 默认地,无法将元素放置到其他元素中。

    3K30

    HTML5原生拖放事件学习与实践

    前言 之前学习了 HTML5 拖放事件,开发中也用到了拖拽组件。为了厘清整体逻辑,专门做了一个小例子。...具体实现效果也很简单:元素可以在容器中任意拖动,元素被移入容器时候,还会有相关样式改变已达到更好展示效果。 例子基本运用了拖放事件全部事件,并且尽量简洁展示了出来。特此记录。...而拖动又由 2 部分组成,分别是被拖动元素相关事件和元素容器相关事件。...1、被拖动元素相关事件事件名称 说明 dragstart 在元素开始被拖动时候触发 drag 在元素被拖动时反复触发 dragend 在拖动操作完成时触发 2、容器相关事件事件名称 说明...拖放》 《HTML5 原生拖拽/拖放》

    1.2K20

    HTML5 SSE 浏览器发送事件

    现在有了 HTML5 之后不需要那么麻烦了,可以使用 websocket 或者 SSE。...除了监听 message 事件用于获取服务端数据之外,还有 open 事件用于监听连接打开状态, error 事件用于监听错误信息。...几种常用客户端-服务器消息传递方式 http 最常用协议,用于客户端主动向服务器发送请求,单向传递; ajax HTTP 扩展版,底层还是 HTTP 协议,只不过客户端是无刷新; comet 也是基于...,循环上述操作(这只是其中一种实现方式); websocket 这是 HTML5新标准,基于 socket 方式实现客户端与服务端双向通信,需要浏览器支持 HTML5; Adobe Flash...总结 本章介绍了 websocket 轻量级版本 sse 协议,简述了 sse 协议使用方法,对比了其他网页中常用消息推送方式以及他们优缺点,这些协议涵盖了大部分使用场景,选用适合协议类型可以避免不必要资源和性能消耗

    24720

    HTML5 SSE 浏览器发送事件

    现在有了 HTML5 之后不需要那么麻烦了,可以使用 websocket 或者 SSE。...除了监听 message 事件用于获取服务端数据之外,还有 open 事件用于监听连接打开状态, error 事件用于监听错误信息。...几种常用客户端-服务器消息传递方式 http 最常用协议,用于客户端主动向服务器发送请求,单向传递; ajax HTTP 扩展版,底层还是 HTTP 协议,只不过客户端是无刷新; comet 也是基于...,循环上述操作(这只是其中一种实现方式); websocket 这是 HTML5新标准,基于 socket 方式实现客户端与服务端双向通信,需要浏览器支持 HTML5; Adobe Flash...总结 本章介绍了 websocket 轻量级版本 sse 协议,简述了 sse 协议使用方法,对比了其他网页中常用消息推送方式以及他们优缺点,这些协议涵盖了大部分使用场景,选用适合协议类型可以避免不必要资源和性能消耗

    28920
    领券