ios中touch事件导致click事件不管用

2024-08-31

关于IOS下click事件委托失效的解决方案

一.由于某些特殊情况下,需要用到事件委托,比如给动态创建的DOM绑定click事件,这里就需要事件委托(这里就牵扯到:目标元素和代理元素)目标元素:动态创建的元素,最终click事件需要绑定到该元素代理元素:动态创建的元素的父级元素,或者document,body等. 二.BUG情况当使用事件委托给[目标元素]添加 click 事件时,如果[代理元素]是 document或body,并且[目标元素]是默认不可点击的(如 div, span 等),此时click事件会失效.如果[目标元素]是可

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

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

移动端开发用touch事件还是click事件

前端开发现在包含了跨浏览器,跨平台(不同操作系统)和跨设备(不同尺寸的设备)开发. 在移动开发的过程中,到底选取touch事件还是click事件?对了,请不要鄙视click,click在移动端开发用着也是不错的. 首先,我先说一下touch事件在开发中存在的两个问题: 1.touch事件在某些场景下存在点击穿透的问题. 2.touchstart事件时触摸屏幕就会触发,touchend事件是手指离开屏幕就会触发,而有时候,我们仅仅是只想滑动屏幕,却会触发这两个事件. 1问题的原因:移动端事件触发的

ios中iframe的scroll滚动事件替代方法

在公众号的开发中,遇到ios中iframe的scroll滚动事件失效,在此做下记录. 因为接口获取的数据必须放在iframe中展示,滚动到底部按钮变亮,如图: 代码如下: <!DOCTYPE html> <html> <head> <title>贷款合同</title> <% include ../include/header.html %> </head> <body style="background:

如何解决 touchstart 事件与 click 事件的冲突

一 · 业务场景的描述在对已完成的PC站点进行移动端适配时,我们想要站点在移动设备上有更快的响应速度,以带给用户更好的体验,此时,我们应该使用移动设备专用的事件系统,例如,使用 touchstart 事件代替 click 事件. 为什么这样效果会更好呢?根据Google开发者文档中的描述: 移动设备上的浏览器将会在 click 事件触发时延迟 300ms ,以确保这是一个“单击”事件而非“双击”事件. 而对于 touchstart 事件而言,则会在用户手指触碰屏幕的一瞬间触发所绑定的事件.所以

［面试没回答上的问题2］IOS上给body绑定click事件的bug

面试被问到ios上的bug,自己提到绑定click事件的bug,但是并没有把问题讲的很清楚,这里再清理一下思路. 这个bug只在IOS上有,包括ihone,ipad,由于ios浏览器都用的safari内核,所以ios浏览器全部中枪. bug描述在进行事件委托时,如果将未存在于DOM的元素事件直接委托到body上的话,会导致事件委托失效,调试结果为事件响应到body子元素为止,既没有冒泡到body上,也没有被body所捕获.但如果事件是DOM元素本身具有的,则不会触发bug.换而言之,只有元素的

移动端touch拖动事件和click事件冲突问题解决

通过一个悬浮球交互功能的案例来阐述问题,以及解决办法. 实现效果类似微信里的悬浮窗效果,苹果手机的悬浮球功能效果可以点击拖动,然后吸附在窗口边缘点击悬浮球,可以跳转界面,或者更改悬浮球的形态准备移动端使用touch事件类型: touchstart当用户在触摸平面上放置了一个触点时触发 (手指放到屏幕上) touchmove当用户在触摸平面上移动触点时触发 (手指在屏幕上滑动) touchend当一个触点被用户从触摸平面上移除(抬起手指) touchcancel终止触摸事件多点触控 T

tap,touch,touchstart,事件与click事件的区别

根据源码所见, 移动端为了将将单击事件更加灵敏,所以现在的JQM,ST...框架都将JS单击事件封装成tap,或者touch或者touchstart事件, 其实现本质是将click触发多次,以打成移动端触屏灵敏的效果. 所以这里如果使用手机浏览器访问你的st,或者jqm项目,就得使用js修改成click事件,以防止单击多次触发的问题

【转】HTML中A标签与click事件的前世今生

在动态网页中,常常需要在单击超链接时处理一些数据,而不是跳转一个网页.在这种情况下,通常有以下三种处理方式: 不设置<a>标签的href属性,只设置onclick属性.在这种处理方式下,通常超链接文本会和正文的文本以相同的形式出现,即不会有默认的下划线.当鼠标放在超链接上也不会显示小手的形状(除非为该超链接设置了CSS).因此,用户很难知道这是一个可以点击的超链接. 将<a>标签的href属性值设置为"#",并设置onclick属性.在这种处理方式下,用户可以

EasyUi中的datagird中a标签的click事件无法触发？（已解决）

***************************2015-10-29 21:07************************* 问题如下: datagrid最后一列编辑中有如下a标签 { field: "编辑", title: "编辑", width: 100, align: "center", //value表示字段值,row表示当前行的值,index表示当前行的索引 formatter: function (value, row,

onblur事件和click事件冲突

在js中onblur事件的优先级click事件,所以同一个元素上绑定两个事件的时候,onblur事件会冲掉click事件. 解决方案:将click事件改成mousedown事件

ios下Safari无法触发click事件的处理

ios下的Safari真是傲娇啊,坑好多. 首先上代码 <!DOCTYPE html> <html> <head> <title>122</title> <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0,user-scalable=no"&

ASP。net中如何在一个按钮click事件中调用另一个按钮的click事件

方法一: 直接指定事件<asp:Button ID="btn1" runat="server" Text="按钮1" onclick="btn1_Click" /><br /><br /><br /> <asp:Button ID="btn2" runat="server" Text="按钮2" onclick=

移动端touch事件影响click事件的相关解决方法

preventDefault()的方法,阻止事件的默认行为. 在移动端,手指点击一个元素,会经过:touchstart --> touchmove -> touchend -->click. $("#largeImg").on("touchstart",function(e){ e.preventDefault(); $("#largeImg").css("display","none")

Silverlight中使用MVVM:DataGrid中触发Button的Click事件

方法1.使用RelativeSource向上查找DataContext中的命令,但是需要注意的是命令绑定需要写全类似: DataContext.ReLoadCommand<Button Grid.Column="1" Command="{Binding DataContext.ReLoadCommand,RelativeSource={RelativeSource Mode=FindAncestor,AncestorType=UserControl}}"Co

iOS 中 Touch ID得使用方法

iPhone 5S公布以后,iOS设备基本都有集成Touch ID.而这个功能对自己的App也是一个非常好的扩展,关于Touch ID的使用方法.大致例如以下, Swift: 引入LocalAuthentication.framework import LocalAuthentication var myContext = LAContext() var error: NSError? var localizedReasonString = "认证提示信息" if myContext.

touchstart 事件与 click 事件的冲突

const clickEvent = (function() { if ('ontouchstart' in document.documentElement === true) return 'touchstart'; else return 'click'; })(); Button.addEventListener(clickEvent, e => { console.log("things happened!") })

移动端的touch click事件的理解+点透

移动端在touch上一共有4个事件 touchstart touchmove touchend touchcancel, touchcancel, 一般来说,它们执行的顺序为 touchstart -> touchmove -> touchend -> touchcancel . 其中touchcancel一般情况下不会触发,也不是这里讨论的焦点: 这里会结合click对上面的事件进行讨论, touch发生在click之前先上段代码,直观感受一下 <!DOCTYPE html&g

移动端click事件300ms延迟

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

移动端click事件延迟300ms的原因以及解决办法

这要追溯至 2007 年初.苹果公司在发布首款 iPhone 前夕,遇到一个问题 —— 当时的网站都是为大屏幕设备所设计的.于是苹果的工程师们做了一些约定,应对 iPhone 这种小屏幕浏览桌面端站点的问题.这当中最出名的,当属双击缩放(double tap to zoom).这也是会有上述 300 毫秒延迟的主要原因. 当用户一次点击屏幕之后,浏览器并不能立刻判断用户是要进行双击缩放,还是想要进行单击操作.因此,iOS Safari 就等待 300 毫秒,以判断用户是否再次点击了屏幕. 于是,

移动端click事件延迟300ms的原因以及解决办法[转载]

原文:http://www.bubuko.com/infodetail-822565.html 这要追溯至 2007 年初.苹果公司在发布首款 iPhone 前夕,遇到一个问题 —— 当时的网站都是为大屏幕设备所设计的.于是苹果的工程师们做了一些约定,应对 iPhone 这种小屏幕浏览桌面端站点的问题.这当中最出名的,当属双击缩放(double tap to zoom).这也是会有上述 300 毫秒延迟的主要原因. 当用户一次点击屏幕之后,浏览器并不能立刻判断用户是要进行双击缩放,还是想要进行单

ios中touch事件导致click事件不管用

热门专题