Closed Dream4ever closed 3 years ago
在用 Vue.js 开发 Web 页面的过程中，发现 click 事件绑定的函数中，有一行代码 document.querySelector('#answer-right').play() 在 iOS 下报错 DOMException。
click
document.querySelector('#answer-right').play()
DOMException
但是这行代码之前在 PC 和 Android 和 iOS 上都是没有问题的，可现在在 iOS 上就会报上面的错误。
因为这段代码是在 node.addEventListener('webkitAnimationEnd', someFunc) 的 someFunc 函数里的，最开始以为是函数定义方式有问题，可检查代码发现函数就是用的最常规的定义方式 function someFunc() { ... }，那就不是这里的问题。
node.addEventListener('webkitAnimationEnd', someFunc)
someFunc
function someFunc() { ... }
后来又在想，是不是执行到这行代码的时候，对应的 DOM 节点还不存在，于是又把代码放到 this.$nextTick(() => { }) 的回调函数体中，发现还是有同样的问题。
this.$nextTick(() => { })
最后实在没招了，继续观察代码，发现报错的这行代码是可以从 node.addEventListener('webkitAnimationEnd', someFunc) 的 someFunc 函数里移出来的，并不会影响运行结果，于是尝试了一下，竟然解决问题了！
真是纳闷，虽然解决问题了，但还是不知道问题出在哪里，先记下来再说吧。
解决过程
在用 Vue.js 开发 Web 页面的过程中，发现
click事件绑定的函数中，有一行代码document.querySelector('#answer-right').play()在 iOS 下报错DOMException。但是这行代码之前在 PC 和 Android 和 iOS 上都是没有问题的，可现在在 iOS 上就会报上面的错误。
因为这段代码是在
node.addEventListener('webkitAnimationEnd', someFunc)的someFunc函数里的，最开始以为是函数定义方式有问题，可检查代码发现函数就是用的最常规的定义方式function someFunc() { ... }，那就不是这里的问题。后来又在想，是不是执行到这行代码的时候，对应的 DOM 节点还不存在，于是又把代码放到
this.$nextTick(() => { })的回调函数体中，发现还是有同样的问题。最后实在没招了，继续观察代码，发现报错的这行代码是可以从
node.addEventListener('webkitAnimationEnd', someFunc)的someFunc函数里移出来的，并不会影响运行结果，于是尝试了一下，竟然解决问题了！真是纳闷，虽然解决问题了，但还是不知道问题出在哪里，先记下来再说吧。