<!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. 基于MATLAB的RGB转YCBCR色彩空间转换

    使用MATLAB进行图片的处理十分方便,看它的名字就知道了,矩阵实验室(matrix laboratory).一副图片的像素数据可以看成是一个二维数组一个大矩阵,MTABLAB就是为矩阵运算而生. M ...

  2. 个人项目：实现wc.exe（Java）

    本项目Github地址:https://github.com/NNewBoy/wc 项目相关要求 基本功能:(已实现) -c 统计文件字符数 -w 统计文件词的数目 -l 统计文件行数 扩展功能:(已 ...

  3. 【转】WPF中PasswordBox控件的Password属性的数据绑定

    英文原文:http://www.wpftutorial.net/PasswordBox.html 中文原文:http://blog.csdn.net/oyi319/article/details/65 ...

  4. 排序算法之堆排序（Heapsort）解析

    一.堆排序的优缺点(pros and cons) (还是简单的说说这个,毕竟没有必要浪费时间去理解一个糟糕的的算法) 优点: 堆排序的效率与快排.归并相同,都达到了基于比较的排序算法效率的峰值(时间复 ...

  5. Java反射reflection与注解annotation的应用（自动测试机）

    一.关于自动测试机 1.什么是自动测试机? 对类中的指定方法进行批量测试的工具 2.自动测试机有什么用? a.避免了冗长的测试代码 当类中的成员方法很多时,对应的测试代码可能会很长,使用测试能够让测试 ...

  6. vux组件简单使用请大佬指点

    一.打开vux项目 我用的是vsCode工具自己找看个人选择,第一次使用请去找vc方便开发使用的插件 二.项目目录及文件,有遮挡部分自行查看文件 三.根据官方文档实现引入插件 通过vux-loader ...

  7. STM32F4时钟配置库函数详解

    在STM32中,所有的应用都是基于时钟,所以时钟的配置就尤为重要了,而不能仅仅只知道使用默认时钟. STM32F4的时钟树如上图所示,HSE为外部接入的一个8M的时钟,然后再给PLL提供输入时钟,经过 ...

  8. Java各国首都列表

    国 家 名 称 首  都 中华人民共和国 People's Republic of China 北京 Beijing 蒙古 Mongolia 乌兰巴托 Elggydggmgj 朝鲜 Democrati ...

  9. 经典贪心算法（哈夫曼算法，Dijstra单源最短路径算法，最小费用最大流）

    哈夫曼编码与哈夫曼算法 哈弗曼编码的目的是,如何用更短的bit来编码数据. 通过变长编码压缩编码长度.我们知道普通的编码都是定长的,比如常用的ASCII编码,每个字符都是8个bit.但在很多情况下,数 ...

  10. jzoj5875

    這玩意嚴格意義上算是水法(因為可能會被卡) 題目中,如果按照一般的bfs來搜索,那麼有平方級邊,會tle 如果按照補邊的線性來搜索,那麼時間複雜度變為min(k*k,m)*n,視n,m同階,則時間複雜 ...