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. LeetcCode 27:移除元素 Remove Element(python、java)

    公众号:爱写bug 给定一个数组 nums 和一个值 val,你需要原地移除所有数值等于 val 的元素,返回移除后数组的新长度. 不要使用额外的数组空间,你必须在原地修改输入数组并在使用 O(1) ...

  2. Kubernetes管理GPU应用

    目录 简介 GPU驱动 Nvidia-docker Nvidia-device-plugin 在Kubernetes上运行GPU应用 附录 简介 伴随着人工智能技术的发展,机器学习的应用场景越来越广泛 ...

  3. C++分治策略实现二分搜索

    问题描述: 给定已排好序的n个元素组成的数组,现要利用二分搜索算法判断特定元素x是否在该有序数组中. 细节须知: (1)由于可能需要对分治策略实现二分搜索的算法效率进行评估,故使用大量的随机数对算法进 ...

  4. Wait… What Happens When my React Native Application Starts? — An In-depth Look Inside React Native

    Discover how React Native functions internally, and what it does for you without you knowing it. Dis ...

  5. Razor Page中的AJAX

    1.由于Razor Pages自带提供防伪令牌/验证,用来防止跨站点请求伪造(称为XSRF或CSRF),所以和MVC框架中API使用方式有稍许的不同. 2.所以在我们使用Razor Pages中的fo ...

  6. 【翻译】Tusdotnet中文文档(1)配置和用法

    TUSDOTNET Tusdotnet是tus协议的一个dotnet实现.tus协议是用来规范文件上传的整个过程,tus基于http协议,规定了一些上传过程中的头部(headers)和对上传过程的描述 ...

  7. Python学习笔记之json.dump和json.load

    10-11 喜欢的数字:编写一个程序,提示用户输入他喜欢的数字,并使用json.dump()将这个数字存储到文件中.再编写一个程序,从文件中读取这个值,并打印消息“I know your favori ...

  8. cin快读

    ios::sync_with_stdio(false); \\取消同步,cin,cout的速度就不慢了!!

  9. EF自动创建数据库步骤之二(继承DbContext类)

    创建好表实体类后,接着就是创建数据库上下文(继承DbContext)并将实体类添加进来. 代码示例如下: using DBClientEntity; using System; using Syste ...

  10. Extjs 树菜单的自动展开数据的请求

    今天在做extjs开发的时候,在树菜单上遇到了一个坑,也许是我刚接触extjs 不熟的缘故 问题描述:后台设置的树自动展开,但是在前端总是只显示一条数据,但是数据确实都请求到了. 经过几个小时不屑的努 ...