html hover效果手势,移动web端模拟hover效果

hover在PC端的用户体验中扮演着很重要的角色，那么移动web端我们又该如何增强这方面的用户体验呢？

下面我简单的在移动web端模拟了下hover的效果。

效果预览

核心代码

//按钮点击效果

$(document).on("touchstart", ".action-btn:not(.disable)", function (e) {

var $this = $(this);

var flag = true;

//遍历子类

$this.find("*").each(function () {

//查看有没有子类触发过active动作

if ($(this).hasClass("active")) flag = false;

});

//如果子类已经触发了active动作，父类则取消active触发操作

if (flag) $this.addClass("active");

});

$(document).on("touchmove", ".action-btn:not(.disable)", function (e) {

if ($(this).hasClass("active")) $(this).removeClass("active");

});

$(document).on("touchend", ".action-btn:not(.disable)", function (e) {

if ($(this).hasClass("active")) $(this).removeClass("active");

});

代码是基于jQuery的

实现原理

基于touchstart、touchmove、touchend这三个事件，动态增删class。

默认只对含有action-btn class且不含有disable class的对象生效

使用方法

场景1

普通列表点击

• item1
• item2
• item3
• item4
• item5

只需要给列表添加上action-btn class以及提供相应的active class。

场景2

复杂列表点击

• item0

  X

• item1
• item2
• item3
• item4

效果：点击列表时，触发列表点击效果，点击小叉时，触发小叉点击效果，小叉所在列不触发点击效果。

注意：无论小叉是否有点击效果(即active class)，都需要给小叉添加action-btn class。即：当列和列的子元素都有点击逻辑的时候，都需要给它们添加action-btn class，否则会触发父类元素的点击效果。

其他

上面只是在移动web端对hover进行了简单的模拟，还有很多不足的地方。例如：当用户滑动列表时，滑动开始触点所在的列的点击效果会一闪而过。这个是因为点击效果的触发条件是touchstart。我也有尝试在触发touchstart时，延迟一定时间后判断是否触发过touchmove，没有触发的话才触发点击效果。但是在android上表现不佳，所以没有贴出类。

后续我会结合我的这篇文章10行代码搞定移动web端自定义tap事件中的tap事件进行效果优化。

文章有什么不对的地方，望大家指正。大家有什么好的实现方法，欢迎交流！