×

iOS下的点击事件失效调查

96
赵团结
2016.06.15 16:07* 字数 370

有时会遇到(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应该有某种机制用来节约资源,就是如果元素摸起来不像可以点的,就不给他响应事件。

日记本
Web note ad 1