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实现，点击一个列表时，输出对应的索引的更多相关文章

  1. 用纯JS实现，点击一个列表时，输出对应的索引（不能用JQuery哦）

    你运行一下代码会发现,无论你点击哪个列表,控制台都是输出10.这是因为var声明的变量是函数作用域的,而不是块级作用域的.也就是说,for循环10次,每次都是改变同一个i,所以它的值会从0一直加到10 ...

  2. 原生JS实现点击一个按钮显示一个div，再点击按钮div隐藏，或点击除div外其它空白处div隐藏

    <!DOCTYPE html> <html style="font-size: 24px"> <head> <title>js点击按 ...

  3. 使用原生js 实现点击消失效果

    JQ版 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title ...

  4. jquery 实现重复点击一个元素时不重复执行效果

    jquery 实现重复点击一个元素时不重复执行效果 这需要用到jquery的stop方法 实例 停止当前正在运行的动画: $("#stop").click(function(){ ...

  5. 原生JS实现树状结构列表

    树状结构列表,这个技术点之前有写过了,是基于vue讲解,但似乎都没有解决痛点,最基础的原生JS该怎么实现呢? 这篇文章会全面详细的介绍树状结构列表的实现,从数据处理成树状结构,到动态生成dom节点渲染 ...

  6. 原生JS实战：分享一个首页进度加载动画！

    本文是苏福的原创文章,转载请注明出处:苏福CNblog:http://www.cnblogs.com/susufufu/p/5871134.html 该程序是本人的个人作品,写的不好,可以参考,但未经 ...

  7. 用html5(requestFullscreen) js实现点击一个按钮使浏览器全屏效果

    项目中需要将后台浏览器的窗口全屏,也就是我们点击一个按钮要实现按F11全屏的效果. 在HTML5中,W3C制定了关于全屏的API,就可以实现全屏幕的效果,也可以让页面中的图片,视频等全屏目前只有goo ...

  8. 原生 js 实现点击按钮复制文本

    最近遇到一个需求,需要点击按钮,复制 <p> 标签中的文本到剪切板 之前做过复制输入框的内容,原以为差不多,结果发现根本行不通 尝试了各种办法,最后使了个障眼法,实现了下面的效果 一.原理 ...

  9. IOS中div contenteditable=true无法输入 fastclick.js在点击一个可输入的div时，ios无法正常唤起输入法键盘

    原文地址: https://blog.csdn.net/u010377383/article/details/79838562 前言 为了提升移动端click的响应速度,使用了fastclick.js ...

随机推荐

  1. 解决SpringDataJpa实体类中属性顺序与数据库中生成字段顺序不一致的问题

    一.在application.yml配置中添加数据库根据实体类自动创建数据库表的配置(这里数据库采用MySQL数据库) jpa: database: MYSQL show-sql: true #Hib ...

  2. ACM 常用 OJ 网址

    ACM 常用 OJ 网址 浙江大学: https://pintia.cn/ 北京大学: http://poj.org/ 杭州电子科技大学: http://acm.hdu.edu.cn/ 中国科技大学: ...

  3. sql server获取格式化的当前日期

    在SQL Server中获取格式化成yyyy-MM-dd的当前日期: ), ); -- 2019-06-17 首先我们知道getdate()函数是用来获取当前日期的,它返回的类型是datetime类型 ...

  4. DataGridView 行数据验证：当输入数据无效时不出现红色感叹号的Bug

    private void dgvView_CellValidating(object sender, DataGridViewCellValidatingEventArgs e){       if ...

  5. instr函数的用法

    1.定义 instr函数返回要截取的字符串在源字符串中的位置 语法如下:  instr( string1, string2 [, start_position [, nth_appearance ] ...

  6. NET 在一个数组中查找另一个数组所在起始位置（下标从0开始，未找到返回-1）

    问题: 如果 search 在 dist 中顺序出现而不要求连续出现,那代码应该如何修改?如何计算这种匹配的可能性? 数组 search=[5,4,6],在数据 dist=[1,5,5,4,3,4,5 ...

  7. C#获取剪切板的内容

    // GetDataObject获取当前剪贴板上的数据 IDataObject data = Clipboard.GetDataObject(); // 将数据与指定的格式进行匹配,返回bool if ...

  8. DevOps 转型到底难不难（转自成哥的世界）

    原文:https://mp.weixin.qq.com/s/QwZf6ZsKGNT6YyereSmpQg DevOps 自 2009 年诞生以来,至今整整过去了十年,从最初的摸索,逐步变成一种主流的软 ...

  9. Spring Boot 使用 JWT 进行身份和权限验证

    上周写了一个 适合初学者入门 Spring Security With JWT 的 Demo,这篇文章主要是对代码中涉及到的比较重要的知识点的说明. 适合初学者入门 Spring Security W ...

  10. WIN10 报错 "此共享需要过时的SMB1协议，而此协议是不安全"的解决方法

    发现新安装的win10能看到其他计算机,但不能共享其他计算的共享文件/夹,出现如下情况:在浏览器里输入:\IP 不能访问到计算机的共享文件夹,或者在桌面上新建一个指向到其他计算机共享文件/夹的快捷方式 ...