一.事件捕获与冒泡 先扯一下事件的触发流程,这个之后会用到. DOM2级事件规定事件包括三个阶段: ① 事件捕获阶段 ② 处于目标阶段 ③ 事件冒泡阶段 大概的流程就是事件从最外层一层一层往里面传递(捕获阶段), 到达触发事件的目标元素(目标阶段),然后再一层一层往上冒泡(冒泡阶段).这个流程事件所经过的元素绑定的对应事件的侦听器都会被触发.例如对元素p的子元素c绑定点击事件,点击元素c后会先在p触发点击事件,使用dispatch触发也是. PS:事件侦听通过target.addEventLis…

click延迟解决方案     移动端click事件会有300ms的延迟,原因是移动端屏幕双击会缩放页面 1.禁止缩放功能 浏览器禁用默认双击缩放行为去掉300ms的点击延迟 user-scalable=no 2.利用touch事件自己封装这个事件解决300ms 3.使用fastclick插件     先引用fastclick.js文件     然后添加     if ('addEventListener' in document) {     document.addEventListener…

博客原文地址:Claiyre的个人博客 https://claiyre.github.io/ 如需转载,请在文章开头注明原文地址 移动端click事件被延迟 移动端的开发经常需要监听用户的双击行为,所以在touchend事件之后会有300ms左右的延迟,用来判断是否有双击事件. 因为这种延迟,所以我们在移动端通常不监听click事件. 移动端的事件的发生顺序是这样的:touchstart---touchmove---touchend,然后大约过300ms触发click事件 tap事件 zepto…

大家都知道移动端的click事件会延迟300ms触发,这时大家可以使用zepto的touch模块,里面定义了一个tap事件,通过绑定tap事件,可以实现点击立即触发的功能. 那么,它的tap事件是怎么实现的呢?这是我们要解决的第一个问题. 第二个问题,大家都知道zepto的tap事件会有点透的问题,那么,点透如何出现,点透为什么会出现,点透问题如何解决等,这是我们要解决的第二个问题. 我们先来看tap事件是如何实现的? 查看touch.js代码,在最后的代码中有以下代码: ;['swipe',…

一.click等事件在移动端的延迟 click事件在移动端和pc端均可以触发,但是在移动端有延迟现象. 1.背景 由于早期移动设备浏览网页时内容较小,为了增强用户体验,苹果公司专门为移动设备设计了双击放大的功能,以确保用户可以方便地放大网页内容,但是当用户单击按钮的时候,移动设备需要延迟约300ms执行,以判断用户是否是要双击. 2.验证 下面通过js代码来直观地验证click等事件的延迟 <div class="result">点我试试</div> var s…

移动端不能使用click,因为click会有300ms.所有有了fastclick这样的解决方案.然后fastclick并没有解决点击态(用户点击的瞬间要有及时的外观变化反馈)的问题.hover会有不消失的问题,所有大家一般用:active.利用 :active 伪类来设置某元素被点击时的点击态样式. 在IOS上使用active必须声明下面js: document.addEventListener("touchstart", function() {},false); CSS中记得去掉…

这两天在做一个WAP页面,在chrome上模拟移动端的时候,都好好的,然而放到手机上测试时, 发现有些点击事件直接无反应,但是有些有反应: 难道是由于我页面上有用到滚动插件,里面的touch事件的preventDefault导致click失效? 于是,换成了touchSart事件试了下,效果比之前略好,但是,有重复点击事件,本小白排查了一会儿, 发现页面上明明在滚动区域有别的点击事件,为毛别的用的好好的,就这个不行,仔细对比,发现别的都是A标签, 无效的是DIV,于是,我就像发现了新大陆一样,麻…

由于单页面web应用的流行,client与server端之间都对应的产生了一些微妙的变化,比方,client原来仅仅是用来展示页面和理清逻辑,而现在逐渐转变成了一个可以进入驱动状态的应用程序. 未来的企业级应用发展方向,以及终于的技术落实相较于眼下一定会有非常大的改变,但新的变化也一定会为开发和管理人员带来一些困扰,从而引发出一系列技术上或是实际操作的问题. 假设server端排除页面渲染功能- 1.减轻server本身压力.server端不用保存不论什么client的状态内容,间接的提升了se…

示例代码: marker.addEventListener("click", function(){ if (!window.markerClicked) { window.markerClicked = true; } else { window.markerClicked = false; return; } setTimeout(function () { window.markerClicked = false; }, ); //todo: 下面写业务代码 }); 上面提供一种…

最近在测试一些h5页面,突然悟到一些测试点 需求点: 用户可以在页面领取礼物,领取的礼物在页面底部展示,用户点击礼物可调起分享弹窗,礼物超过一屏可左右滑动, bug的表现形式: 仅当礼物超过一屏时(一行),点击礼物无法调起分享弹窗(此问题仅在Android机上可复现,ios无法复现) 问题原因: 1.前端开发在开发使用了最新版本滑动控件,这个最新的控件需要对属性进行配置,比如点击事件等 研发使用了新控件,没有对属性值进行配置 2.问题为什么只在Android上可复现? Android原生系统对较…