JS延时判断,改善中国博客联盟展示导航自动点击的灵敏度
时间:2022-05-05
本文章向大家介绍JS延时判断,改善中国博客联盟展示导航自动点击的灵敏度,主要内容包括其使用实例、应用技巧、基本知识点总结和需要注意事项,具有一定的参考价值,需要的朋友可以参考一下。
说到 JS 延时点击,度娘给出的结果几乎都是 js 的延迟点击 Demo,即鼠标产生一个 mousehover 事件之后,延迟多少秒执行点击动作。
本文主要分享一个带时间判断的 js 延时自动点击效果:当鼠标经过某页面元素,也就是产生一个 mousehover 事件时,触发 js 计时器,若经过指定时长后,鼠标还在这个元素上,将执行点击动作,否则计时器就清零,等待下一次的触发。
好了,说了一堆很费解的描述,一起来看下实际案例吧!
张戈研究这个 JS 特效的原因就是,博友 ijustplay 在我博客留言,说联盟的按钮太灵敏了,往往鼠标从浏览器标签页移动到联盟导航,想点击某个博客时,因为经过了导航的菜单,导致导航子页面的切换,体验不是很好。
这个问题,其实我在前期加入自动点击功能的时候就已经发现了,但是一直也没去理他,既然有成员反馈了,张戈还是非常重视的,于是新一轮的折腾开始了。
在我同事的指点下,终于实现了这个带判断的延时点击效果。
以下是示例代码:
<div id="myid">
<!-- 要延时点击的对象 -->
</div>
<script type="text/javascript">
$(function(){
var timeId = 0;
var flag = true;
$("#myid").mouseover(function(e){ //双引号内的值是第1行中的id
flag = true;
var target = e.srcElement||e.target;
var timeId = setTimeout(function(){
if(flag){
target.click();
}
},168); //168表示当鼠标持续hover168毫秒才执行点击动作,否则重置计时。
}).mouseleave (function(){
flag = false;
clearTimeout(timeId);
});
});
</script>
使用很简单,基本看注释就会用了,只要记得修改实际元素 ID,并在代码之前引入 Jquery.js 即可。
目前,此功能已经应用到中国博客联盟的成员导航以及首页的分类菜单上。
效果:拖动鼠标自然经过成员导航的菜单按钮,是不会产生点击动作的,只有停留在菜单按钮才会生成点击动作。
Ps:经多次实际测试才得出最佳延时时间 168ms:既不会因为鼠标不经意通过导致误点,也不会因为延迟太久,给人很迟钝的感觉,此问题完美解决!
- 单拼域名can.com以高达99.2万元成交!
- CI学习 CCNET Config 第一天
- IBatisNet基础组件
- 学习altas笔记[客户端JS和Altas环境初始化关系和DataTable返回数据的客户端处理]
- 在Windows 8 Hyper-V下的安装CentOS 6和SSH配置
- WordPress RSS Feed 优化/设置技巧六则
- SourceTree 基本介绍
- 学习Altas 笔记[JS简单调用服务端方法]
- 使用WinSCP软件在windows和Linux中进行文件传输
- 线程安全的Generic Dictionary
- Python 项目实践三(Web应用程序)第五篇
- CentOS 6.3下 安装 Mono 3.2 和Jexus 5.4
- Python 项目实践三(Web应用程序)第四篇
- 负载均衡环境下缓存处理
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- Django由一查多
- ruby+watir UI测试(二)
- Python 3.7 + Selenium UI 自动化测试简单实例
- Python 3.7 + BeautifulSoup 简单爬虫实例
- 你还在用Jmeter的GUI模式进行性能测试吗?(二)
- Jenkins配置SSH Key下载代码
- 详解kubeadm安装k8s集群常见问题
- Python 3.7 + Django 2.2.5 Web项目搭建
- Flink集成数据湖之实时数据写入iceberg
- unittest简单应用
- 假如 Web 当初不支持动态化
- Spring Boot使用OpenAPI规范
- 图论-单源最短路径(Dijskal算法)
- Mysql系列第二十五讲 mysql如何确保数据不丢失?有几点值得我们借鉴
- 使用Jsch进行安全的文件上传及下载