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. Laravel框架中Echo的使用过程

    今天的这篇文章中给大家分享关于laravel框架中echo的使用,文章的内容是一步一步来的,用了16步走完一个过程,过程很清晰,希望可以帮助到有需要的朋友吧.话不多说,直接看内容.官方文档推荐使用 P ...

  2. 【前端知识体系-CSS相关】CSS布局知识强化

    1.实现两栏/三栏布局的方法? 表格布局 float + margin布局 inline-block布局 flexbox布局(兼容性的问题) 1.1 基础布局 <style> * { ma ...

  3. PhpStorm注册使用方法

    解压 sudo tar -zvxf PhpStorm-2019.3.tar.gz -C /usr/local 屏蔽hosts # Phpstorm 0.0.0.0 account.jetbrains. ...

  4. Linux内核之vmlinuz反汇编

    本文介绍在Fedora上对Linux内核的vmlinuz进行反汇编.如果内核是debug版本,可以用来查看某个函数的源代码. 1. 安装kernel-devel软件包 dnf -y install k ...

  5. javascript的对象与字符串相互转换

    因为对象不利于网络传输,因此要转换成字符串,转换成字符串之后又要考虑怎么将这个字符串转换回对象,以便取得对象中的属性. 常用的做法是将对象转换为JSON字符串,这里的转换方法也是用的JSON官方提供的 ...

  6. 初次用R的实际案例数据分析

    这是一次教授布置的期末作业,也是书籍<商务数据分析与应用>的一个课后作业 目录 数据描述 数据预处理 描述性统计分析 模型分析(方差分析) 数据描述 非学位职业培训机构的178个学员的数据 ...

  7. MySQL:实用 SQL 语句集合

    写在前面的话 本文主要用于记录工作中不经常使用但是偶尔用到又非常有用的 SQL 语句,持续不断不定期更新. 数据库大小统计 1. 查看 MySQL 某个库的所有表大小,记录数,占用空间等. ,), ' ...

  8. 在ASP.NET Web API 2中使用Owin OAuth 刷新令牌(示例代码)

    在上篇文章介绍了Web Api中使用令牌进行授权的后端实现方法,基于WebApi2和OWIN OAuth实现了获取access token,使用token访问需授权的资源信息.本文将介绍在Web Ap ...

  9. 解决Laydate在弹出层中一闪而过的问题

    解决办法:添加 trigger: 'click' 属性 laydate.render({ elem: '#demo' ,btns: ['clear', 'now'] ,trigger: 'click' ...

  10. C++中Matrix(矩阵)的基本运算( +、-、=、<<)

    利用二维指针开辟空间形成二维数组: 原题为设计一个Matrix类,实现基本的矩阵运算: 初次设计为HL[10][10]数组,存放矩阵元素,后改为二维指针: 主要问题存在于二维指针理解的不透彻,无法理解 ...