阅读(1041)评论(2)

banner

AddEventListener

今天偶然发现,在我的ios11.3的iphone上,我博客可以随意拖动的音乐图标在拖动的时候页面居然也会滚动,就像我是在滑动页面一样

赶紧开电脑处理这个问题,在windows的chrome上一切正常

经过各种关键词查找,我终于锁定了问题所在

罪魁祸首的ios11.3中的safair中,有一个更新

Updated root document touch event listeners to use passive mode improving scrolling performance and reducing crashes
更新了根文档触摸事件侦听器,默认使用passive:true提高滚动性能并减少崩溃

很久以前,addEventListener() 的参数约定是这样的:

addEventListener(type, listener, useCapture)

后来,最后一个参数,也就是控制监听器是在捕获阶段执行还是在冒泡阶段执行的 useCapture 参数,变成了可选参数(传 true 的情况太少了),成了:

addEventListener(type, listener[, useCapture ])

在之后(2016年底)DOM 规范做了修订:addEventListener() 的第三个参数可以是个对象值了,也就是说第三个参数现在可以是两种类型的值了:

addEventListener(type, listener[, useCapture ])
addEventListener(type, listener[, options ])

这个修订是为了扩展新的选项,从而自定义更多的行为,目前规范中 options 对象可用的属性有三个:

addEventListener(type, listener, {
    capture: false,
    passive: false,
    once: false
})

在react.js 中,jsx默认绑定的事件是不带第三个参数option

然而ios11.3中的safair默认使用passive:true,这就导致我的e.preventDefault()无法阻止默认的touchmove事件导致页面滚动

到目前为止,react.js还没有对passive有什么官方的支持

https://github.com/facebook/react/issues/6436

因此,我也只能在组件渲染完毕后手动添加一个给document添加一个passive:false 的touchmove事件,在组件渲染完毕后移除,在touchmove事件中根据是否按下(原先的逻辑中有保存)来e.preventDefault()

代码上比较不美观,但是没办法,我没法预知react.js何时重新绑定事件,希望react.js能够支持passive

发表评论

评论

暂无评论

    本日の格言
    博主闪亮登场!

    就算世界终结,也无所谓
    by 少女终末旅行

    超想说
    博主の友人
    对!就是这种低调,如同吃了炫迈
    超有爱
    TOP