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. proxy 简化版本

    public interface People { public String eat(String param); } public class Jack implements People { @ ...

  2. 阿里云RDS数据库备份同步到自建库方法（SHELL脚本）

    一.背景: 由于阿里云RDS生产库每天都需要备份且拷贝到自建读库,而如果使用阿里云的自动拷贝到只读实例, 费用太高, 故采用自编写同步脚本方法实现. 二.前提: 1). 已开通阿里云RDS, 且开启定 ...

  3. SQL -------- WHERE子句与AND，OR和NOT运算符结合使用。

    AND, OR and NOT  与 运算符中的且或非的意思相同 WHERE子句可以与AND,OR和NOT运算符结合使用. and 表示 查询的语句必须全部包含and 连接的两个或多个条件 or    ...

  4. C#异步的世界【上】（转）

    新进阶的程序员可能对async.await用得比较多,却对之前的异步了解甚少.本人就是此类,因此打算回顾学习下异步的进化史. 本文主要是回顾async异步模式之前的异步,下篇文章再来重点分析async ...

  5. Java : JavaWeb和Tomcat相关

    部署:1.直接把项目移动到webapps文件夹下, 用文件夹名访问(如果ROOT文件夹可以直接访问)2.也可以把war包放到webapps文件夹下, tomcat自动解压,但是删除war包必须要停止t ...

  6. 使用Ueditor上传图片到图片服务器（二）

    上一篇主要写了前端部分如何配置ueditor的上传路径,已经jsp页面中如何使用ueditor的编辑器功能以及如何配置单独的图片上传功能. 这一篇,我分两部分:第一部分是搭建图片服务器以及配置ftp上 ...

  7. Python 练习题：用索引取出LIST中的值

    请用索引取出下面list的指定元素,分别为Apple,Python,Lisa # -*- coding: utf-8 -*- # 请用索引取出下面list的指定元素 L = [ ['Apple','G ...

  8. NoSql的对比以及键值对的存储方式(为什么速度特别快)

    什么是NoSql NoSQL(Not Only SQL),泛指非关系型的数据库,是对不同于传统的关系型数据库的数据库管理系统的统称,强调Key-Value Stores和文档数据库的优点.为了解决大规 ...

  9. Python连接MongoDB数据库并执行操作

    原文:https://blog.51cto.com/1767340368/2092813 环境设置: [root@mongodb ~]# cat /etc/redhat-release CentOS ...

  10. v-text和v-html绑定数据显示

    1.v-text:相当有js的$("#root").text(); 2.v-html 相当于js的$("#root").html(); 3.插值赋值的数据会被v ...