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吧