首先介绍一下这个问题出现的背景:我在写网站时想要一套代码兼容手机端和pc端,所以用了jquery和jquery mobile,点击事件用的jquerymobile tap事件,但是在移动端测试时出现点击一次但触发执行两次的情况,在网上找了一些资料,解决方案如下. 1.首先我在网上搜了一下相同问题的人,看到一个比较靠谱的回答.https://segmentfault.com/q/1010000000135980 有人提问原有的click点击事件统统都会被执行两次,代码如下. <!DocType h…

因项目中使用 coffeeScript (http://coffee-script.org/),此处记录下用 coffeeScript 语法解决 tap 事件触发两次的问题. 在 id="button" 上绑定 tap 触摸事件如下代码: $(document).on 'tap', '#button', ()-> # 业务逻辑代码 console.log(111) 分析: 在浏览器中点击一次 button 会输出两次 ‘111’,手机上测试偶尔输出一次,偶尔两次,很是奇怪,一开始…

**label标签内含有input元素,点击事件会触发两次** 如果你的结构是label内写input实现点击文字时候input也有相应.并且,把事件设置在了label上,那么就会执行两次了. //html: <label class="first"><input type="checkbox"/>第一</label> <br/> <label class="second"><sp…

今天帮群里的朋友看一段代码的时候偶然间遇到一个label的坑,点击label的时候,监听的click事件被执行两次: 具体代码如下: <div id="test"> <input type="checkbox" name="abc" id="abc"/> <label for="abc">3423432432432432</label> </div>…

首先我们看下面的代码片段(label包裹checkbox) <div class="example"><label for="chk_6" class="label-1">选项6<input class="chkbox-1" type="checkbox" id="chk_6" value="1"></label><…

标准参考 关于 HTML 4.01 规范中 onload 内在事件说明:http://www.w3.org/TR/html401/interact/scripts.html#adef-onload 关于 DOM Level2 Events 规范中 load 事件说明:http://www.w3.org/TR/DOM-Level-2-Events/events.html#Events-eventgroupings-htmlevents 问题描述 插入空白页面 IFRAME 元素时 Chrome S…

先要npm下来zepto:npm install zepto 然后npm下来exports-loader和script-loader 配置如下: JavaScript // webpack.config { // ... module: { loaders: [{ test: require.resolve('zepto'), loader: 'exports-loader?window.Zepto!script-loader' }] } } 这样我们在页面入口文件中就可以这么写: JavaSc…

刚才升级chrome后发现的,在54.0.2840.98上点击没有问题,在新升级的55.0.2883.75 上点击后会报错Cannot read property 'trigger' of undefined 解决方法 就是修改谷歌浏览器对指针活动的支持.. 1.谷歌浏览器输入 chrome://flags/ 回车 2.找到 指针活动 那一项 3.选择 已停用 然后重启google浏览器就好了.~ (T T当然只是为了方便调试,这样禁用了谷歌新特性好不好就不知道了) ——————————————…

问题描述: 通常,为了用户体验,我们点击单选框或者复选框后面文字,即可选中当前项.代码如下: <label> <input type="radio" name="sex" />男 </label> <label> <input type="radio" name="sex" />女 </label> 但是,此时,如果label标签有点击事件,则会触发两次.…

首先感谢这位小哥!http://qubernet.blog.163.com/blog/static/1779472842011101505853216/ 太长姿势了. 在jQuery事件绑定中,dbclick可以触发两次click事件.例如一个DOM元素div,既绑定了 click 事件,又绑定了 dblclick 事件,这两个事件分别要做独立的事情.事件处理上没有冲突,都可以各自完成各自的操作.双击的时候虽然是执行了 dblclick 事件,但是在这之前,也执行了click 事件,那么,如何来…

在项目中需要给select绑定改变事件,来触发动作,但是发现改变一次select,onchange方法执行两遍 //这是那个标签,用的是我们公司内部的selectlist <select class="selectpicker" id="gglb" name="bulletinclass" title="请选择 公告类别" data-live-search="false" data-width=&qu…

有些需求中,需要一个元素上既有双击事件,也有单击事件,而两者实现的效果不一样. 这时可以使用ng-dblclick与ng-click来实现需求,但是要避免浏览器将双击事件误认为是两次单击事件,从而出现逻辑错误. 可以通过$timeout进行判断,取消第二次单击事件的执行. <img src="myImage.jpg" ng-click="singleClick()" ng-dblclick="doubleClick()"> In yo…

<el-radio-group v-model="uploadStatus" class="upload-status-radio"> <el-radio label="0" class="green" @click.native="clickRadio($event, 0)">成功</el-radio> <el-radio label="1"…

点透现象出现的场景: 当A/B两个层上下z轴重叠,上层的A点击后消失或移开(这一点很重要),并且B元素本身有默认click事件(如a标签)或绑定了click事件.在这种情况下,点击A/B重叠的部分,就会出现点透的现象. 点透现象出现的原因: zepto的tap事件是通过兼听绑定在document上的touch事件来完成tap事件的模拟的,并且tap事件是冒泡到document上触发的!!! 在移动端不使用click而用touch事件代替触摸是因为click事件有着明显的延迟,具体touchsta…

之前翻译过一篇关于fastclick的快速点击文章http://www.cnblogs.com/lilyimage/p/3568773.html,fastclick可以解决在手机上点击事件的300ms延迟:另外我们也知道zepto的touch模块,帮助我们实现了很多手机上的事件,比如tap等,tap事件也是为了解决在click的延迟问题.那么他们有什么区别呢? 先看zepto的touch模块实现: $(document) .on('touchstart ...',function(e){ ...…

首先是什么情况下会发生zepto(tap)的事件穿透: 当一个弹出层用tap点击之后这个层隐藏或者是移走,都会触发下面对应位置的点击事件(click)和一些标签的默认行为(a标签的跳转.input获取焦点). 原因: zepto的tap通过兼听绑定在document上的touch事件来完成tap事件的模拟的,及tap事件是冒泡到document上触发的,再点击完成时的tap事件(touchstart\touchend)需要冒泡到document上才会触发,而在冒泡到document之前,用 户手…

复现条件:chrome 55+ 1.zepto tap的实现及double fire的原因 在监听DOM根节点的时候,touchStart后通过XY的坐标偏差,与tapTime的计时判断Tap/LongTap/doubleTap,而两次触发正是入口绑定事件的问题.  同时绑定了touchStart pointerDown,原先这种写法只是为了hack 微软的Edge浏览器和兄弟浏览器,但是chorme 从55版本时就开始支持pointer.而我浏览版本很高,导致了这个问题可以复现. Timlin…

移动端click会遇到2个问题,click会有200-300ms的延迟,同时click事件的延迟响应,会出现穿透,即点击会触发非当前层的点击事件. 为什么会存在延迟? Google开发者文档中有提到: mobile browsers will wait approximately 300ms from the time that you tap the button to fire the click event. The reason for this is that the browser…

点击事件延迟问题所在: 在移动端中,由于两次触摸是放大操作,,所以当你点击一次的时候,浏览器会等待300ms,看用户是否会进行第二次点击,如果没有的话,才会执行点击事件 为什么要解决: 随着h5游戏,移动端网页的流行,用户对web网页的性能也随着提高,点击事件的延迟会影响用户体验,尤其是在游戏中,这是个大忌. 这是因为这个问题的存在,所以出现了tap事件,tap事件对应的是在移动端中的. tap事件的原理: tap事件的原理其实是源于触摸touch事件,在移动触摸事件就是在同个点触发,及touc…

闪烁问题 由于在iOS Safari上click事件存在300ms响应延时,所以为touch事件添加样式,会和click事件默认样式叠加而产生闪烁问题. 因为ios safari浏览器中对触摸事件的响应顺序是: ontouchstart -> ontouchmove -> ontouchend -> (300ms) onclick 快速解决问题的方法: 消除click默认样式 通过讲click事件样式的alpha通道设置为0(透明),消除click事件的闪烁效果 -webkit-tap-…

触摸事件 touch是一个事件组,意思不止一个事件,是移动端滑动事件组,touchstart touchmove touchend touchcancel touchstart 当刚刚触摸屏幕的时候触发 touchmove 在屏幕上来回的滑动的时候触发 touchend 离开屏幕的时候触发 touchcancel 被迫终止触摸的时候触发 (例如:来电 消息弹窗) <div class="box"></div> <script> var box = d…

Win7/Win8/Win8.1/Win10下的DragDrop事件不触发 2011-02-02  来自:博客园  字体大小:[大 中 小] 摘要:你的应用程序需要从windows资源管理器拖动文件到你的WinForm上,你会发现原本在XP和Win2003下运行很正常的程序,结果到了win7下就不支持拖拽了,DragEnter/DragOver/DragDrop等事件统统都不被触发...... Win7与原来的XP和Win2003相比,安全控制方面更严格.比如,当我们以administrator…

<div onclick="alert();"> <div onclick="alert();"></div> </div> 上面给一个很简单的例子,当点击第二个div的时候,会同时触发此div与其父元素的点击事件,按照官方的说法,这是事件的浮升,那么要怎么阻止这种情况呢? 可以使用 event.cancelBubble=true; 代码如下: <div onclick="alert();"&…

发生环境: $modal.on('click', '#search',function(e){}); 上面代码的语法是这样的: .on( events [, selector ] [, data ], handler(eventObject) ) 其中$modal为父容器,在该容器上绑定click事件,当id为search的button被点击时才触发function 存在问题: 1. 点击第一次触发一次 2. 点击第二次触发两次 3. 点击第三次触发四次 ... 以此类推成指数增长 问题原因:o…

你可能碰到过在页面上创建一个弹出层,弹出层有个关闭的按钮,你点了这个按钮关闭弹出层后,这个按钮正下方的内容也会执行点击事件(或打开链接).这个被定义为这是一个“点透”现象. 以前,我也听到过tap的点透问题,想着阻止一下默认事件或冒泡就好,但是试了好久都不管用,于是就上网查资料,结果网上果真有人解决了此问题. 从zepto官方插件touchJS可以看出zepto的tap通过兼听绑定在document上的touch事件来完成tap事件的模拟的,即tap事件是冒泡到document上触发的. 再点击…

一.click 和 tap 比较 两者都会在点击时触发,但是在手机WEB端,click会有 200~300 ms,所以请用tap代替click作为点击事件. singleTap和doubleTap 分别代表单次点击和双次点击. 二.关于tap的点透处理 在使用zepto框架的tap来移动设备浏览器内的点击事件,来规避click事件的延迟响应时,有可能出现点透的情况,即点击会触发非当前层的点击事件. 处理方式: (1). github上有一个叫做fastclick的库,它也能规避移动设备上clic…

什么是事件穿透? 点击上面的一层时会触发下面一层的事件 ”google”说原因是“tap事件实际上是在冒泡到body上时才触发”,也就是Zepto的tap事件是绑定在document上的,所以会导致 现象原因:zepto的tap通过兼听绑定在document上的touch事件来完成tap事件的模拟的,及tap事件是冒泡到document上触发的,再点击完成时的tap事件(touchstart\touchend)需要冒泡到document上才会触发,而在冒泡到document之前,用 户手的接触屏…

一. 画面闪烁问题与双缓冲技术 1.1 导致画面闪烁的关键原因分析: 1  绘制窗口由于大小位置状态改变进行重绘操作时 绘图窗口内容或大小每改变一次,都要调用Paint事件进行重绘操作,该操作会使画面重新刷新一次以维持窗口正常显示.刷新过程中会导致所有图元重新绘制, 而各个图元的重绘操作并不会导致Paint事件发生,因此窗口的每一次刷新只会调用Paint事件一次.窗口刷新一次的过程中,每一个图元的重绘都会立即显示到窗口, 因此整个窗口中,只要是图元所在的位置,都在刷新,而刷新的时间是有差别的,闪…

Win7与原来的XP和Win2003相比,安全控制方面更严格.比如,当我们以administrator登陆XP或Win2003时,运行所有的程序即是以管理员的身份启动的.但当以administrator登陆Win7时,通常状态下,运行普通程序是以普通用户的身份启动的.当我们的WinForm应用程序需要以管理员的身份运行时(比如,为了访问windows注册表),我们需要在程序清单(app.manifest文件)中将UAC选项改为"requireAdministrator"(可以参考如何自…

iphone上click事件不触发的问题解决. //在ID为jsProvince上有这么一个事件: $('body').on('click', '#jsProvince', function(e){ $(this).next('.province-list').removeClass('hide'); }); 但是在iphone上点击就是没反应,无法出发绑定的点击事件. 但是在android上测试是没问题的. 找了半天终于找到了解决办法: 只需要给ID为jsProvince的元素添加一个如下的c…