zoukankan      html  css  js  c++  java
  • IOS的Safari浏览器中,点击事件失效的原理及解决办法

    这里做了事件委托,简单区分一下【目标元素】和【代理元素】,为后续论述理解做铺垫。

    【目标元素】:实际希望点击的元素,可以是任意标签。

    【代理元素】:代替【目标元素】触发点击事件的元素,有可能是目标元素的父级元素,document,body等。

    一、现象

    当使用事件委托给【目标元素】添加 click 事件时,如果【代理元素】是 document或body,并且【目标元素】是默认不可点击的(如 div, span 等),此时click事件会失效。如果【目标元素】是可点击的(比如 button、a 标签),此时click事件还是有效的

    二、原理

    移动端页面,在做click事件委托的时候,不要委托到document上,因为不管是安卓还是IOS,document是没有click事件的,只有touch事件,而且有些标签在IOS上也是没有click事件的。

    三、解决办法有3种

    1、【代理元素】可以是【目标元素】的父级元素,document,body等,但【目标元素】必须为a或者button可点击的标签。

    尽量使用touch事件或者tap事件,如果你需要click事件的延迟效果来达到某些交互,尽量把click事件绑定在a或者button可点击的标签上。

    2、【代理元素】必须是【目标元素】的非document,body父级元素,【目标元素】可以是任意标签。

    click事件委托到非document或body的父级元素上。

    3、【代理元素】可以是【目标元素】的父级元素,document,body等,【目标元素】可以是任意标签,但是要设置cursor: pointer;。

    出现上述点击事件失效的问题,让我们不得不体会到标签语义化的重要性,于是这里建议大家写代码时,【目标元素】多用a或者button可点击的标签,【代理元素】多用非document,body父级元素。

  • 相关阅读:
    【转】SVN linux命令及 windows相关操作(二)
    【转】SVN linux命令及 windows相关操作(一)
    spring框架DI(IOC)和AOP 原理及方案
    [转载]JVM性能调优--JVM参数配置
    JVM性能调优-GC内存模型及垃圾收集算法
    密码运算API(GP Internal API)
    时间API(GP Internal API)
    可信存储API(GP Internal API)
    内存管理函数(GP Internal API)
    Panic(GP Internal API)
  • 原文地址:https://www.cnblogs.com/camille666/p/ios_safari_click_disabled.html
Copyright © 2011-2022 走看看