记一次移动端H5页面中textarea光标无法随点击位置自由移动的问题

问题描述

　　一个提交回答内容的移动端H5页面，有一个textarea输入框，在输入框里输入一段内容后，想在内容前面再插入一段内容，但是点击textarea里的文字，光标无法切换聚焦到点击的位置。

 

问题排查

　　多次操作、分析之后，排除css可能导致的问题，也排除了touch事件和click事件差异的问题(因为在pc浏览器里打开是好的，在移动端模式打开就不行了)，最后在开发者工具的Event Listener里，把和输入框有关的事件一个一个地remove掉，终于定位到一个touchend事件，移除后输入框就正常了，分析这个touchend事件后确认了是这个事件回调函数中有调用e.preventDefault();事件，阻止了textarea输入框的默认行为。

 

解决方法

　　由于排查出来的那个touchend事件是绑定在document上面的，不能简单地把那个事件注释掉，因为会影响到其他地方，所以就想到在textarea自身上用addEventListener绑定一个touchend事件，并在事件回调函数中调用e.stopPropagation();方法阻止冒泡，这样当点击输入框的时候，就不会冒泡到document上了，也就不会执行上面说的那个touchend事件了，textarea的默认行为就不会被阻止掉了，光标就能自由移动切换了。