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. OpenCV vs. Armadillo vs. Eigen on Linux

    OpenCV vs. Armadillo vs. Eigen on Linux From:http://nghiaho.com/?p=936 In this post I’ll be comparin ...

  2. MongoDB学习笔记(五)

    MongoDB 查看执行计划 MongoDB 中的 explain() 函数可以帮助我们查看查询相关的信息,这有助于我们快速查找到搜索瓶颈进而解决它,本文我们就来看看 explain() 的一些用法及 ...

  3. Java 8——日期时间工具库(java.time)

    一.前言 在介绍Java SE 8中新的日期时间库前,先了解下Java 8之前的日期时间工具的诟病. 在Java SE 8前,日期时间工具库在java.util包中,包括: java.util.Dat ...

  4. MAC安装Node.js

    官网下载Node.js Node.js v10.16.3 to /usr/local/bin/node • npm v6.9.0 to /usr/local/bin/npm Make sure tha ...

  5. python 练习题:请利用循环依次对list中的每个名字打印出Hello, xxx!

    方法一: # -*- coding: utf-8 -*- # 请利用循环依次对list中的每个名字打印出Hello, xxx! L = ['Bart', 'Lisa', 'Adam'] n = 0 w ...

  6. 在VS2019创建WebForm程序,开个箱

    现在公司用的是VS2010+ASP.NET WebForm + DevExpress控件做系统开发,好老好老了,没办法,只能在这里尝一尝新鲜的味道. TMD,还以为马上创建,谁知还有一关!!! 还是那 ...

  7. 【C#】Winform 令人困擾的畫面閃爍問題解法

    DoubleBuffered = true 如果 Control 沒有這個屬性,可以使用我下列擴充函式進行設定︰ public static void SetDoubleBuffered<T&g ...

  8. python接收字符并回显

    # -*- coding: utf-8 -* import serial import time # 打开串口 ser = serial.Serial("/dev/ttyAMA0" ...

  9. 设计模式之(十四)责任链模式(Chain of Responsibility)

    在业务场景中,有很多是需要审批的.审核方式还可能常常发生变化,而责任链模式就是为了解决这种场景的情况的. 责任链模式定义:十多个对象都有机会处理请求,从而避免发送者和接受者之间的耦合关系.讲这些对象连 ...

  10. java request.getInputStream中文乱码解决方案

    请求时要指定为UTF-8,中文码码完美解决 /** * * 得到请求body字符串,一般用于content-type:application/json * */ public static Strin ...