移动web端模拟hover效果

2016-07-29 23:46:00

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事件进行效果优化。

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

关键字：JavaScript, jquery

本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处。如若内容有涉嫌抄袭侵权/违法违规/事实不符，请点击举报进行投诉反馈！