美文网首页前端视野程序员
iOS下的点击事件失效调查

iOS下的点击事件失效调查

作者: 赵团结 | 来源:发表于2016-06-15 16:07 被阅读1723次

    有时会遇到(React)在iOS下,在div上设置的on click不生效,就像没点过一样。
    我刚开始认为是React的锅,也许事件代理的问题?,经过检索查阅,在github上发现了一个issue有提到

    React attaches event listeners to the document. iOS doesn't fire click events for nodes (at all) unless they seem "clickable"
    https://github.com/facebook/react/issues/134

    大概意思是点击的地方是“ unclickable ”的,很奇怪
    仔细研究了下,这个不是 React 的问题。
    调试时发现,当事件触发时,此时冒泡回不到 document,无法完成这个事件,
    我按照 issue 里所说加上了 cursor:pointer,果然可以正常触发,显然在iOS上 点击事件不能触发看起来不像能点的元素
    解决办法有两种:
    一种是让它看起来可以点,也就是加上所谓鼠标手
    *{cursor:pointer;}
    还有一种在调试时发现,如果某个元素的点击事件被声明,也可以打上所谓的点击标记。哪怕空函数。
    类似:
    this.getDOMNode().onclick =function(){}

    两种方法异曲同工,都是将点击事件声明,让它看起来可点。
    看来,Safari应该有某种机制用来节约资源,就是如果元素摸起来不像可以点的,就不给他响应事件。

    相关文章

      网友评论

      • jerry_kong:这个分享点太棒了,不可 :smile: 击元素,导致了事件不冒泡,使用这两种方法,使其可点击。 :+1:
      • FutureToken:这种坑太折磨人了……安卓点击事件好好的,iOS不行……测试:啊,这个咋回事啊?为啥iOS不行啊?balabala…… :smile: :+1:
        赵团结:@亚洲黑色 今天又再次遇到。。神坑

      本文标题:iOS下的点击事件失效调查

      本文链接:https://www.haomeiwen.com/subject/vrkpdttx.html