巧用调试手段，轻松化解浏览器fixed定位元素触控事件失效难题
2023-10-07 21:27:05
前言
最近我在进行一个PC端页面的移动适配项目。为了提升用户体验，我尝试使用移动端特有的touchstart事件来代替传统的click事件，以期节省用户300ms的等待时间，并提供更即时的点击反馈。然而，在这个过程中，我遇到了一个棘手的问题：fixed定位元素在页面滚动后，touch事件会失效。
问题
为了重现问题，我创建了一个简单的HTML页面，其中包含一个fixed定位的元素，并在该元素上绑定了touchstart事件监听器。
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<div id="fixed-element" style="position: fixed; top: 0; left: 0;">
<p>Fixed定位元素</p>
</div>
<script>
document.getElementById('fixed-element').addEventListener('touchstart', function(e) {
console.log('Fixed定位元素被点击');
});
</script>
</body>
</html>
当我打开这个页面，并在fixed定位元素上进行滑动操作时，touchstart事件可以正常触发并输出日志。但是，当我滚动页面，使fixed定位元素脱离视口后，再进行滑动操作，touchstart事件便不再触发了。
分析与解决
为了找到问题的根源，我首先使用浏览器自带的调试工具来检查fixed定位元素的属性。我发现，在页面滚动后，fixed定位元素的top属性会变为0，这意味着该元素已经脱离了视口。
通过查看浏览器兼容性文档，我了解到，在某些浏览器中，fixed定位元素在脱离视口后，其touch事件将不再触发。这是因为浏览器会将脱离视口的元素视为不可见元素，从而不会触发touch事件。
为了解决这个问题，我尝试将fixed定位元素的top属性改为一个固定值，使其始终位于视口内。这种方法确实解决了问题，touchstart事件在页面滚动后也能正常触发。
<div id="fixed-element" style="position: fixed; top: 100px; left: 0;">
<p>Fixed定位元素</p>
</div>
但是，这种方法有一个缺点，就是fixed定位元素在页面滚动时不会随着页面内容一起滚动。这可能会导致用户在滚动页面时，fixed定位元素的位置发生跳动，影响用户体验。
为了兼顾fixed定位元素的可见性与滚动同步性，我最终采用了另外一种解决办法。我将fixed定位元素的position属性改为absolute，并将其top属性设置为一个计算值，使该元素始终位于视口顶部。
<div id="fixed-element" style="position: absolute; top: 0; left: 0;">
<p>Fixed定位元素</p>
</div>
这种方法既保证了fixed定位元素在页面滚动时也能正常触发touch事件，又避免了fixed定位元素在滚动页面时发生跳动的问题。
总结
通过巧妙的调试手段，我最终找到了fixed定位元素在页面滚动后，touch事件失效问题的根源，并提出了两种解决办法。希望本文能为遇到类似问题的开发者提供一些启发。
