移动端touchMove事件怎么控制dom的div不移动

移动端表层div滑动，导致底层body滑动（touchmove的阻止）

body很长,可以滑动,body头部有一个模拟下拉的选择框,下拉选择有滚动轴我给body一个overflow:hidden和高度是没有用的.手机网站上背景还是可以滑动,然后我给body一个touchmove的preventdefault()阻止事件,body滑动阻止了,PC上面是可以了,但是手机上面滑动div还是会导致底部body的滑动,我给div 一个阻止冒泡的事件stopPropagation(),手机网站上面还是不可以. 解决方案我经过反复测试,发现滚动轴滚到底部的时候,会触发body

关于如何获取移动端 touchmove 事件中真正触摸点下方的元素

移动端的touchstart, touchmove, touchend三个事件,点击元素并拖动时,获取到了touchmove事件, 但是event.touches[0].target所指向的元素却是touchstart时获取到的元素,而并非手指所移动到上方的元素,所以在处理获取移动到哪个元素上方之类的需求时,普通方法已不奏效,解决方式如下: var element = document.elementFromPoint(event.originalEvent.pageX, event.origi

移动端 touchmove高频事件与requestAnimationFrame的结合优化

移动端最高频耗内存的的操作莫属 touchmove 与scroll事件两者需要微观的优化,使用 requestAnimationFrame性能优化 H5性能优化requestAnimationFrame 这里我们讲述 touchmove:touchmove 事件发生很频繁,会比屏幕刷新率快,导致无效的渲染和重绘: 帧数 –显示设备通常的刷新率通常是50~60Hz –1000ms / 60 ≍ 16.6ms(1毫秒的优化意味着 6%的性能提升) 这就是常说的 16.6毫秒的优化

移动端touch事件影响click事件以及在touchmove添加preventDefault导致页面无法滚动的解决方法

这两天自己在写一个手机网页,用到了触屏滑动的特效,就是往右滑动的时候左侧隐藏的菜单从左边划出来. 做完之后在手机原生浏览器中运行正常,但在QQ和微信中打开,发现touchmove只会触发一次,而且touchend也经常不触发. 之后百度了一下这个问题,原因是主要是由于200ms超时导致内核不一定会一直处理touchmove事件,一旦超时会将后续所有的事件转交给UI处理,导致touchmove不会一直触发. 为了解决开发者需要,建议开发者在touchstart时调用event.preventDe

移动端touch事件实现页面弹动--小插件

动手之前的打盹说实话真的是好久没有更新博客了,最近一直赶项目,身心疲惫:最关键的是晚上还要回去上一波王者,实在是忙啊! 这周下来,清闲了些许,或许是因为要到国庆的缘故吧,大家都显得无精打采.俗话说的好: "身在曹营,心在汉!".早早的就去为祖国庆生去了,哈哈. -是时候表演真正的技术了,那么先来一杯coffee,就是那种像屎尿混合在一起的颜色的饮料:要问什么味道,哈哈,一周没洗的脚被一双一年没洗的袜子包着,捂在密不透风的旅游鞋里,散发出来的汗液的味道. 小页面的搭建搭建一个网页,注

移动端JS事件、移动端框架

一.移动端的操作方式和PC端是不同的,移动端主要是用手指操作,所以有特殊的touch事件,touch事件包括如下几个事件: 1.手指放到屏幕上时触发 touchstart 2.手指放在屏幕上滑动式触发 touchmove 3.手指离开屏幕时触发. touchend 4.系统取消touch事件的时候触发,比较少用. touchcancel 二.移动端一般有三种操作:点击.滑动.拖动,这三种操作一般是组合使用上面的几个事件来完成的,所有上面的4个事件一般很少单独使用,一般是封装使用来实

HTML5移动端触摸事件

一.移动端事件问题 1.click事件300ms延迟问题 2007年第一代iphone发布,移动端Safari首创双击缩放功能,原理是click一次后,经过300ms之后检测是否再有一次click,如果有就会缩放,如果没有则是一个click事件.所以cilck操作会有卡顿感觉. 2.dblclick事件失效由于双击缩放的存在,移动端的dblclick事件也失效了. 二.移动端触摸事件 touchstart 在屏幕上按下手指时触发 touchmove 在屏幕上移动手指时触发 touche

移动端click事件300ms延迟

移动端click 事件延迟300ms 一般情况下,如果没有经过特殊处理,移动端浏览器在派发点击事件的时候,通常会出现300ms左右的延迟.也就是说,当我们点击页面的时候移动端浏览器并不是立即作出反应,而是会等上一小会儿才会出现点击的效果.在移动WEB兴起的初期,用户对300ms的延迟感觉不明显.但是,随着用户对交互体验的要求越来越高,现今,移动端300ms的点击延迟逐渐变得明显而无法忍受. 那么,移动端300ms的点击延迟是怎么来的呢? 产生原因移动浏览器上支持的双击缩放操作,以及IOS Sa

实现移动端touch事件的横向滑动列表效果

要实现手机端横向滑动效果并不难,了解实现的原理及业务逻辑就很容易实现.原理:touchstart(手指按下瞬间获取相对于页面的位置)——>touchmove(手指移动多少,元素相应移动多少). 接下来讲讲实现逻辑: 其实就是手指拖动列表向哪个方向移动多少像素,并设置左右拖动的边界值. 附上代码及注释: <div id="common_wrap" class="common-wrap"> <h4 class="common-kit__

移动端tap事件(轻击、轻触)

一.问题 ①移动端也有click点击事件,click点击会延迟200~300ms ②因为点击的响应过慢,影响了用户体验,所以需要解决响应慢的问题二.解决方案 ①使用tap事件:即轻击,轻敲,响应速度快(不是原生事件,是通过touch相关事件衍生过来的) <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="

JS事件流、DOM事件流、IE事件处理、跨浏览器事件处理、事件对象与类型

事件的移除 removeEventListener() 第二个参数需要指定要移除的事件句柄,不能是匿名函数,因为无法识别想要移除成功,那么三个参数必须跟addEventListener中的三个完全一致 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style&

H5案例分享：移动端touch事件判断滑屏手势的方向

移动端touch事件判断滑屏手势的方向方法一当开始一个touchstart事件的时候,获取此刻手指的横坐标startX和纵坐标startY: 当触发touchmove事件时,在获取此时手指的横坐标moveEndX和纵坐标moveEndY;最后,通过这两次获取的坐标差值来判断手指在手机屏幕上的滑动方向. 思路:用touchmove的最后坐标减去touchstart的起始坐标,X的结果如果正数,则说明手指是从左往右划动:X的结果如果负数,则说明手指是从右往左划动:Y的结果如果正数,则说明手指是从

一些pc端web事件移动端不再可行

1.onkeyUp,onkeyDown,onkeyPress等事件不再管用,要用oninput代替 2.onclick事件会有延迟,因为手机需要等待判断是否是双击事件(ondblclick).所以,最好用touchstart事件代替. 3.onmousemove事件用touchmove事件代替 4.touchend事件表示手指离开屏幕时触发. 5.给dom元素注册事件用document.getElementById('eleId').addEventListener('touch

js键盘事件全面控制详解

js键盘事件全面控制主要分四个部分第一部分:浏览器的按键事件第二部分:兼容浏览器第三部分:代码实现和优化第四部分:总结第一部分:浏览器的按键事件用js实现键盘记录,要关注浏览器的三种按键事件类型,即keydown,keypress和keyup,它们分别对应onkeydown. onkeypress和onkeyup这三个事件句柄.一个典型的按键会产生所有这三种事件,依次是keydown,keypress,然后是按键释放时候的keyup. 在这3种事件类型中,keydown和keyup比较

js 控制展开折叠 div html dom

js 控制展开折叠 div html dom <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html;chars

js键盘事件全面控制

js键盘事件全面控制主要分四个部分第一部分:浏览器的按键事件第二部分:兼容浏览器第三部分:代码实现和优化第四部分:总结第一部分:浏览器的按键事件用js实现键盘记录,要关注浏览器的三种按键事件类型,即keydown,keypress和keyup,它们分别对应onkeydown. onkeypress和onkeyup这三个事件句柄.一个典型的按键会产生所有这三种事件,依次是keydown,keypress,然后是按键释放时候的keyup. 在这3种事件类型中,keydown和keyup比较底层

移动端click事件延迟300ms到底是怎么回事，该如何解决？

不管在移动端还是PC端,我们都需要处理用户点击,这个最常用的事件.但在touch端click事件响应速度会比较慢,在较老的手机设备上会更为明显(300ms的延迟). 问题由来这要追溯至 2007 年初.苹果公司在发布首款 iPhone 前夕,遇到一个问题:当时的网站都是为大屏幕设备所设计的.于是苹果的工程师们做了一些约定,应对 iPhone 这种小屏幕浏览桌面端站点的问题. 这当中最出名的,当属双击缩放(double tap to zoom),这也是会有上述 300 毫秒延迟的主要原因.双击缩

移动端touch事件 || 上拉加载更多

前言: 说多了都是泪,在进行项目开发时,在上拉加载更多实现分页效果的问题上,由于当时开发任务紧急,所以就百度找了各种移动端的上拉下拉实现加载更多的插件.然后就留下了个坑:上拉加载的时候会由于用户错误的姿势,例如长按后再touchmove等会出现卡死的假象.(ps:当然, 我不认为是插件的问题,当时的想法是觉得引用的插件存在冲突),于是,我就直接通过封装touch事件完成上拉加载实现分页的功能. 备注:文章最后会加上为实现这个功能我找的一些插件了解touch事件在应用touch事件实现上拉加

移动端tap事件的封装

/*封装tap*/ cc.tap = function(dom,callback){ /* * 要求没有触发 touchmove 事件 * 并且响应速度要比click快 */ if(dom && typeof dom == 'object'){ var isMove = false; var startTime = 0; dom.addEventListener('touchstart',function(e){ //console.log('touchstart'); //consol

js 处理移动端触摸事件

在处理移动端的touch事件时,我们可以选择一些插件来处理,比如jquery ui touch punch.js 提供丰富的触摸效果,可以满足移动端的开发, 但是,有些移动端开发中,并不需要如此复杂的效果,例如我们只需知道滑动的距离,向左还是向右,我们可以自己写一些代码来处理touch事件: 以下代码,只在触摸情况下支持,电脑需要chrome模拟手机: 可以改造成自己需要的效果: <!doctype html> <html> <head> <meta charse

[DOM Event Learning] Section 4 事件分发和DOM事件流

[DOM Event Learning] Section 4 事件分发和DOM事件流事件分发机制: event dispatch mechanism. 事件流(event flow)描述了事件对象在数据结构中是如何传播的. 传播路径事件对象(event objects)被分发给事件目标(event target),在分发开始的时候,在实现中必须先确定事件对象的传播路径. 这个传播路径必须是一个有序的list,其中包含了事件对象必须通过的事件目标. 对于DOM的实现来说,这个传播路径必

移动端touchMove事件怎么控制dom的div不移动

热门专题