用原生js实现,点击一个列表时,输出对应的索引
var ul = document.querySelector("ul");
ul.addEventListener("mousedown", mouseHandler);
function mouseHandler(e) {
e.preventDefault();
if (e.target.nodeName !== "LI") return;
var arr = Array.from(ul.children);
var index = arr.indexOf(e.target);
console.log(index);
}
用原生js实现,点击一个列表时,输出对应的索引的更多相关文章
- 用纯JS实现,点击一个列表时,输出对应的索引(不能用JQuery哦)
你运行一下代码会发现,无论你点击哪个列表,控制台都是输出10.这是因为var声明的变量是函数作用域的,而不是块级作用域的.也就是说,for循环10次,每次都是改变同一个i,所以它的值会从0一直加到10 ...
- 原生JS实现点击一个按钮显示一个div,再点击按钮div隐藏,或点击除div外其它空白处div隐藏
<!DOCTYPE html> <html style="font-size: 24px"> <head> <title>js点击按 ...
- 使用原生js 实现点击消失效果
JQ版 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title ...
- jquery 实现重复点击一个元素时不重复执行效果
jquery 实现重复点击一个元素时不重复执行效果 这需要用到jquery的stop方法 实例 停止当前正在运行的动画: $("#stop").click(function(){ ...
- 原生JS实现树状结构列表
树状结构列表,这个技术点之前有写过了,是基于vue讲解,但似乎都没有解决痛点,最基础的原生JS该怎么实现呢? 这篇文章会全面详细的介绍树状结构列表的实现,从数据处理成树状结构,到动态生成dom节点渲染 ...
- 原生JS实战:分享一个首页进度加载动画!
本文是苏福的原创文章,转载请注明出处:苏福CNblog:http://www.cnblogs.com/susufufu/p/5871134.html 该程序是本人的个人作品,写的不好,可以参考,但未经 ...
- 用html5(requestFullscreen) js实现点击一个按钮使浏览器全屏效果
项目中需要将后台浏览器的窗口全屏,也就是我们点击一个按钮要实现按F11全屏的效果. 在HTML5中,W3C制定了关于全屏的API,就可以实现全屏幕的效果,也可以让页面中的图片,视频等全屏目前只有goo ...
- 原生 js 实现点击按钮复制文本
最近遇到一个需求,需要点击按钮,复制 <p> 标签中的文本到剪切板 之前做过复制输入框的内容,原以为差不多,结果发现根本行不通 尝试了各种办法,最后使了个障眼法,实现了下面的效果 一.原理 ...
- IOS中div contenteditable=true无法输入 fastclick.js在点击一个可输入的div时,ios无法正常唤起输入法键盘
原文地址: https://blog.csdn.net/u010377383/article/details/79838562 前言 为了提升移动端click的响应速度,使用了fastclick.js ...
随机推荐
- Unity Shader 屏幕后效果——Bloom外发光
Bloom的原理很简单,主要是提取渲染图像中的亮部区域,并对亮部区域进行模糊处理,再与原始图像混合而成. 一般对亮部进行模糊处理的部分采用高斯模糊,关于高斯模糊,详见之前的另一篇博客: https:/ ...
- centos下java环境搭建安装
1. 购买服务器(阿里云) 2. 重置密码,重启服务器 3. 创建账号work groupadd work #创建组 mkdir /data # 创建数据文件夹 useradd -d /data/wo ...
- SQL ----------- 借助视图写多表查询
在多表查询中可能遇到两表.三表乃致四表查询,自己进行直接用sql 语句进行书写的话可能比较难,但是可以借助视图进行分析,书写 1.右击视图点击新建 选择需要的表点击添加,注意两个表之间要有相同的字段 ...
- 一个简单的 ValueTask 的示例
Task 确实有潜在的缺点,特别是对于实例创建很多 并且高吞吐量和性能是关键问题的场景 : Task 是一个类.作为一个类,这意味着任何需要创建一个对象的操作都需要分配一个对象,分配的对象越多, ...
- 搭建RocketMQ集群
一.环境及准备 集群环境: 软件版本: 部署前操作: 关闭防火墙,关闭selinux(生产环境按需关闭或打开) 同步服务器时间,选择公网ntpd服务器或者自建ntpd服务器 [root@es1 ~]# ...
- 携程 Apollo分布式部署
一.环境准备 操作系统:CentOS release 7.5 (启动脚本理论上支持所有Linux发行版,建议CentOS 7) JDK :jdk1..0_162 (建议安装Java 1.8+) MyS ...
- linux服务器的SSH 配置
远程连接服务器: 就是通过文字或图形接口的方式来远程登陆另外一台服务器系统,让你在远程的终端前面登陆linux 主机以取得可操作主机的接口 主要的远程连接服务器的主要类型: 1)文字接口明文传输 : ...
- redux的本质是一套行为解释系统
redux的本质是一套行为解释系统. 首先构建解释系统: 然后使用解释系统对行为进行解释,进而完成对store和状态的维护.
- mini Redis(项目 二)
一个仿Redis的内存数据库(主要用来做命令解析)服务端, 客户端使用的开源工具 : https://dom4j.github.io/ github:https://github.com/h ...
- VUE创建播发器组件并调用
欢迎来到我的友链小屋 首先用vue-cli创建前端项目 参考:https://www.cnblogs.com/ouyangkai/p/11549290.html 新建play.vue文件 编写pl ...