1.介绍
现在的触摸屏设备越来越普及，无论是手机还是平板电脑，我们都需要操作上面的按钮来完成各种任务。一个共同的问题是，在按下按钮后，有时会出现按钮的粘性悬停效果，使用户感到困惑和不满。本文将介绍该效果的原因以及如何避免它。
2.粘性悬停效果的原因
粘性悬停效果是触摸屏上的一种常见现象。当用户按下一个按钮时，它会凸起，但是在手指离开屏幕后，按钮可能剩余一些残留的触摸特性，导致它仍旧凸起一段时间，直到渐渐恢复原状。
这种效果的原因是因为触摸屏设备上的按钮通常是基于CSS的，其背后的逻辑是获得用户的点击事件并设置一个样式。在某些情况下，点击事件可能不会完全触发，导致按钮保持其悬停的状态。
3.如何避免粘性悬停效果
3.1.添加移动端手势库
一个可行的解决方案是添加移动端手势库，例如Hammer.js或Easel.js。这会将CSS样式从点击事件中移除，解决了点击事件不完全触发的问题。
var myElement = document.getElementById('myElement');
var hammertime = new Hammer(myElement);
hammertime.on('tap', function(event) {
console.log('tap');
});
在该例子中，我们通过创建一个新的Hammer实例并将其与要处理的元素关联，来设置一个简单的tap事件。
3.2.使用touch-action属性
另一个解决方案是使用CSS3中的touch-action属性。该属性可用于禁用触摸事件，而不是仅仅从HTML代码中删除样式。
button { touch-action: none }
这将禁用触摸事件，并消除了粘性悬停效果。
4.总结
粘性悬停效果是触摸屏上的一个常见问题。它发生的原因在于按钮仍然保持点击事件中的样式。为了避免这种现象，可以添加移动端手势库或使用touch-action属性来禁用点击事件，以获得更好的用户体验。