<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,height=device-height,initial-scale=1.0,maximum-scale=1.0,minimum-scale=1.0,user-scalable=no">
<title>移动端模拟hover</title>
<style>
html {
font-size: 100px;
}

* {
font-size: .16rem;
}
.content {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
overflow: auto;
z-index: 10;
background-color: #fff;
-webkit-overflow-scrolling: touch;
}
.items {
margin: 0;
padding: 0;
list-style: none;
}
.items li {
box-sizing: border-box;
line-height: .40rem;
text-indent: 1em;
border-bottom: 1px solid #e3e3e3;
}

.items li.active {
background-color: #e3e3e3;
}
</style>
</head>
<body>
<div class="content">
<ul class="items">
<li class="action-btn">item1</li>
<li class="action-btn">item2</li>
<li class="action-btn">item3</li>
<li class="action-btn">item4</li>
<li class="action-btn">item5</li>
</ul>
</div>

<script src="http://dn.yunzhenshi.com/js/jquery-1.8.3.min.js"></script>
<script>
$(function () {
//自定义tap
$(document).on("touchstart", function (e) {
if (!$(e.target).hasClass("disable")) $(e.target).data("isMoved", 0);
});
$(document).on("touchmove", function (e) {
if (!$(e.target).hasClass("disable")) $(e.target).data("isMoved", 1);
});
$(document).on("touchend", function (e) {
if (!$(e.target).hasClass("disable") && $(e.target).data("isMoved") == 0) $(e.target).trigger("tap");
});

//按钮点击效果
$(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");
});

});
</script>
</body>
</html>

移动端模拟hover的更多相关文章

  1. chrome控制台模拟hover、focus、active等状态，方便调试

    有时候需要调试一个网页,需要某些元素在hover.focus.active等状态. 比如hover,鼠标放到hover上,然后去控制台中找DOM,鼠标移开的时候元素就不是hover状态了. 此时可以使 ...

  2. 移动端:active,:hover无法很好触发动画的解决方案

    移动端:active,:hover无法很好触发动画的解决方案 1:问题环境: 用css3定义了一个动画,使用:hover伪类调用动画时在移动端不能很好的进行动画. 2:解决方案: 定义一个open类, ...

  3. 在pc游览器端模拟移动端幻灯片

    用简单的思路写了下pc端模拟web端的图片滑动效果... 效果卡,bug多,完毕,继续学习c3方法写这个,iscroll就是可以模拟这种效果,还在学习中,难点<触点判断> 代码一份 < ...

  4. 基于fiddler的APP抓包及服务端模拟

    在HTTP接口的测试过程中,一般我们会按照如下的步骤进行: 1)测试环境的准备 2)HTTP消息体的构造 3)HTTP消息的发送及断言 如果我们可以拿到项目组的接口文档,并且HTTP后台服务是可以工作 ...

  5. [转]基于fiddler的APP抓包及服务端模拟

    在HTTP接口的测试过程中,一般我们会按照如下的步骤进行: 1)测试环境的准备 2)HTTP消息体的构造 3)HTTP消息的发送及断言 如果我们可以拿到项目组的接口文档,并且HTTP后台服务是可以工作 ...

  6. 怎么在移动端模拟pc端进行web开发调试日志

    由于移动端开发,许多地方需要进行手势交互开发,而在pc模拟手机浏览器中不能进行模拟手势,所以无法查看日志,于是网上找了一个,腾讯vConsole,感觉还可以,分享给大家安装也方便 我的项目是基于vue ...

  7. IoTClient开发4 - ModBusTcp协议服务端模拟

    前言 上篇我们实现了ModBusTcp协议的客户端读写,可是在很多时候编写业务代码之前是没有现场环境的.总不能在客户现场去写代码,或是蒙着眼睛写然后求神拜佛不出错,又或是在办公室部署一套硬件环境.怎么 ...

  8. PC端模拟手机浏览网页

    很多网站都通过User-Agent来判断浏览器类型,如果是3G手机,显示手机页面内容,如果是普通浏览器,显示普通网页内容. 谷歌Chrome浏览器,可以很方便地用来当3G手机模拟器.在Windows的 ...

  9. PC端模拟移动端访问 字体大小限制

    审查元素(F12),调整为移动端,如下图所示: 在字体大小小于12px时,font-size就不起作用了. 在真实移动端设备上是起作用的.

随机推荐

  1. QGIS+GH + MapServer

    拒绝描图,如何利用GH+QGIS完爆场地底图?http://www.sohu.com/a/251004986_657084 拒绝描图--爬取OSM数据绘制底图 所用软件 RHINO+GH\QGIS\G ...

  2. hdu2041

    题目 这道题以前也看到过,但是没有写出来,我刚开始以为用循环遍历一边就可以了,结果我错了,没想到是用的斐波拉契推出来的,用的是递推的思想. 站在楼梯的第n级想一下,前一步是从哪里来的,问题就清楚了. ...

  3. hdu 5037 周期优化

    http://acm.hdu.edu.cn/showproblem.php?pid=5037 有只青蛙踩石子过河,河宽m,有n个石子坐标已知.青蛙每次最多跳L.现在可以在河中再放一些石子,使得青蛙过河 ...

  4. D3_book 7 area

    <!-- area的例子csv使用node.js提供的 --> <!DOCTYPE html> <meta charset="utf-8"> & ...

  5. 循环读取list 的几种方法？

    1.最常用的方法.循环找出该位子的list元素for(int i = 0;i < list.size(); i ++){System.out.println(list.get(i));}2.利用 ...

  6. [翻译][HTML]CELLPADDING and CELLSPACING

    w3school手册:http://www.w3schools.com/tags/att_table_cellspacing.asp 一直以来都发现自己对cellpadding&cellspa ...

  7. 关于ListBox的几个问题

    Winfrom ListBox绑定数据源list界面不更新问题与绑定数据源不可CRUD问题 场景:获取一个listbox的选中项添加到另一个listbox中 解决方案-1:不要直接绑定DataSour ...

  8. LeetCode138：Copy List with Random Pointer

    题目: A linked list is given such that each node contains an additional random pointer which could poi ...

  9. BigData – Join中竟然也有谓词下推!?

    本文由  网易云发布. 在之前的文章中简要介绍了Join在大数据领域中的使用背景以及常用的几种算法-broadcast hash join .shuffle hash join以及 sort merg ...

  10. Process Class (System.Diagnostics)

    import sys def hanoi(n, a, b, c): if n == 1: print('%c --> %c' % (a, c)) else: hanoi(n-1, a, c, b ...