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. 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 ...

  2. SQL 自动生成序号

    查询出来的数据的编号,不是按照从1开始的有序进行的,界面上显示想显示有序排序 select RANK() OVER(ORDER BY id ) as ID ,* from reconcilet_det ...

  3. python 函数式编程 闭包,返回一个函数

    参考链接:https://www.liaoxuefeng.com/wiki/1016959663602400/1017434209254976 作业 #使用生成器 def createCounter( ...

  4. Django2.0版本以上与pymsql 不匹配问题以及解决方法

    Django2.0版本以上与pymsql 不匹配问题以及解决方法 Django 2.0 以上 如果使用pymysql0.93,需要一下两步操作: # 1 第一次报错信息: File "D:\ ...

  5. 修改Nginx配置参数解决http状态码:413上传文件大小限制问题

    修改Nginx上传文件大小限制 我们使用ngnix做web server的时候,nginx对上传文件的大小有限制,默认是1M. 当超过大小的时候会报413(too large)错误.这个时候我们要修改 ...

  6. ztree实现复选框单选功能

    /** * ztree的默认配置项 * */ var setting = { view: { selectedMulti: false //按住ctrl是否可以多选 }, check: { enabl ...

  7. vue工作原理分析

    初始化 在 new Vue() 时会调⽤用_init()进⾏行行初始化,会初始化各种实例例⽅方法.全局⽅方法.执⾏行行⼀一些⽣生命周期. 初始化props. data等状态.其中最重要的是data的「 ...

  8. Fiddler模拟响应

    1 启用规则 2 不匹配的规则通过,不勾选会导致不匹配的请求失败 3 匹配url 4 响应信息,Fiddler内置了一些响应脚步,你也可以选择一个保护响应信息的文本文件

  9. Android 可单选多选的任意层级树形控件

    花了几天研究了下鸿扬大神的博客<Android打造任意层级树形控件,考验你的数据结构和设计>,再结合公司项目改造改造,现在做个笔记. 先看看Demo的实现效果.首先看的是多选效果 再看看单 ...

  10. Oracle分析函数FIRST_VALUE、LAST_VALUE

    FIRST_VALUE.LAST_VALUE分析函数可以按照特定分组和排序取出组内首尾值,语法 FIRST_VALUE { (expr) [ {RESPECT | IGNORE} NULLS ] | ...