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. LeetCode 485:连续最大1的个数 Max Consecutive Ones(python java)

    公众号:爱写bug 给定一个二进制数组, 计算其中最大连续1的个数. Given a binary array, find the maximum number of consecutive 1s i ...

  2. Beta冲刺(8/7)——2019.5.30

    作业描述 课程 软件工程1916|W(福州大学) 团队名称 修!咻咻! 作业要求 项目Beta冲刺(团队) 团队目标 切实可行的计算机协会维修预约平台 开发工具 Eclipse 团队信息 队员学号 队 ...

  3. MySQL事务未提交导致整个表锁死

    问题及说明: 当一个SQL事务执行完了,但未COMMIT,后面的SQL想要执行就是被锁,超时结束:报错信息如下: mysql> ERROR 1205 (HY000): Lock wait tim ...

  4. vertica 中位数函数 MEDIAN 的使用

    中位数函数:MEDIAN 使用表达式:MEDIAN ( expression ) OVER ( [ window‑partition‑clause ] ) 准备测试数据: ), name ), sal ...

  5. TCP连接的建立(三次握手和四次挥手)

    写到最后发现我描述的挺水的,这个老哥的用语比较专业一点https://blog.csdn.net/qq_38950316/article/details/81087809  (老哥这篇有些许错别字 大 ...

  6. MySQL的统计总数count(*)与count(id)或count(字段)的之间的各自效率性能对比

    执行效果: 1.  count(1) and count(*) 当表的数据量大些时,对表作分析之后,使用count(1)还要比使用count(*)用时多了!  从执行计划来看,count(1)和cou ...

  7. 解决mac/win双系统,mac原生读写NTFS分区重启后失效的问题

    安装mac/win双系统,然后在mac下启用原生的NTFS分区读写功能,并将分区创建桌面快捷方式后,会发现有时候进入win后再进mac,原来创建的分区桌面快捷方式是白色的图标,并且分区也无法打开,这个 ...

  8. python 排序 选择排序

    算法思想: 首先从序列中选择一个最值,将这个元素和序列的首地址上的元素交换,这样就完成了一个元素的排序,接下来,重复上述过程,不断的从剩下的序列中选取最值,然后添加到有序部分的末尾(注意,这种添加是通 ...

  9. 在AWS中自定义Credential Provider实现Client连接

    今天在使用AWS中,由于原来的 key和secrect是放在配置文件ini里面的.现在需要改成从DB里面获取,所以需要自定义Credential.在AWS中重写这个挺简单的. 我这里是继承原先的Cre ...

  10. TinyMCE常用插件

    Advanced Tables 基于table插件的增强表格插件,添加了排序功能. tinymce.init({ plugins: 'table advtable', menubar: 'table' ...