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. linux-centos安装图解及配置IP远程连接

    本次安装使用vm软件的15版本,系统为centos7.6(1810) 系统安装图解>配置IP信息联网>真实机是无线网络状态,虚拟机如何联网>远程工具连接虚拟机 一,vm安装cento ...

  2. 【UOJ#33】【UR #2】树上GCD(长链剖分,分块)

    [UOJ#33][UR #2]树上GCD(长链剖分,分块) 题面 UOJ 题解 首先不求恰好,改为求\(i\)的倍数的个数,最后容斥一下就可以解决了. 那么我们考虑枚举一个\(LCA\)位置,在其两棵 ...

  3. 使用Net Mail发送邮件

    最近用到了发送邮件这个功能,简单记录一下案例.代码如下: using System; using System.Collections.Generic; using System.Linq; usin ...

  4. C# 调用TRIO控制器ActiveX教程

    最近项目由于用到上位机与TRIO交互,为了使交互编程方便,使用了TRIO的COM组件.记录一下为方便以后自己使用,同时也方便大家做参考! 组件下载地址(百度云盘):https://pan.baidu. ...

  5. net dll 重新签名

    已经有强签名的dll或exe程序无法引用无签名的dll,这时候就需要对dll进行签名,签名的步骤如下: 为没有源码的DLL文件添加强名称 如果项目中引用了其他没有源码的dll文件,并且此dll文件是没 ...

  6. Scanner 中next()和nexline()方法的区别

      在java实现字符窗口的输入时,很多人更喜欢选择使用扫描器scanner,它操作起来比较简单.在编程的过程中,我发现用scanner实现字符串的输入有两种方法,一种是next(),另一种是next ...

  7. Tp5 空模块、空控制器、空方法的处理

    1.空模块处理 如果是开启了路由 可直接找到route.php文件,具体的位置看个人放置的位置,在里面新增一个语句 '__miss__' => ['portal/index/errorMsg', ...

  8. element表格的滚动条在合计上边

    默认滚动条是在下边的,不好看,这里改一下 修改样式.完美解决: .el-table { overflow-x: auto; } .el-table__header-wrapper, .el-table ...

  9. 有些CRM settype用事务码COMM_ATTRSET打不开的原因

    This question is asked by Dr. Lin. Issue For example, settype COM_COMMERCIAL could be opened via tco ...

  10. 【团队项目1】 团队展示&选题

    一.团队展示 1. 队名:这次稳了 2. 队员: 莫少政 3117004667 (队长) 黄思扬 3117004657 余泽端 3117004679 江海灵 3117004658 温治乾 311700 ...