用原生js实现,点击一个列表时,输出对应的索引
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实现,点击一个列表时,输出对应的索引的更多相关文章
- 用纯JS实现,点击一个列表时,输出对应的索引(不能用JQuery哦)
你运行一下代码会发现,无论你点击哪个列表,控制台都是输出10.这是因为var声明的变量是函数作用域的,而不是块级作用域的.也就是说,for循环10次,每次都是改变同一个i,所以它的值会从0一直加到10 ...
- 原生JS实现点击一个按钮显示一个div,再点击按钮div隐藏,或点击除div外其它空白处div隐藏
<!DOCTYPE html> <html style="font-size: 24px"> <head> <title>js点击按 ...
- 使用原生js 实现点击消失效果
JQ版 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title ...
- jquery 实现重复点击一个元素时不重复执行效果
jquery 实现重复点击一个元素时不重复执行效果 这需要用到jquery的stop方法 实例 停止当前正在运行的动画: $("#stop").click(function(){ ...
- 原生JS实现树状结构列表
树状结构列表,这个技术点之前有写过了,是基于vue讲解,但似乎都没有解决痛点,最基础的原生JS该怎么实现呢? 这篇文章会全面详细的介绍树状结构列表的实现,从数据处理成树状结构,到动态生成dom节点渲染 ...
- 原生JS实战:分享一个首页进度加载动画!
本文是苏福的原创文章,转载请注明出处:苏福CNblog:http://www.cnblogs.com/susufufu/p/5871134.html 该程序是本人的个人作品,写的不好,可以参考,但未经 ...
- 用html5(requestFullscreen) js实现点击一个按钮使浏览器全屏效果
项目中需要将后台浏览器的窗口全屏,也就是我们点击一个按钮要实现按F11全屏的效果. 在HTML5中,W3C制定了关于全屏的API,就可以实现全屏幕的效果,也可以让页面中的图片,视频等全屏目前只有goo ...
- 原生 js 实现点击按钮复制文本
最近遇到一个需求,需要点击按钮,复制 <p> 标签中的文本到剪切板 之前做过复制输入框的内容,原以为差不多,结果发现根本行不通 尝试了各种办法,最后使了个障眼法,实现了下面的效果 一.原理 ...
- IOS中div contenteditable=true无法输入 fastclick.js在点击一个可输入的div时,ios无法正常唤起输入法键盘
原文地址: https://blog.csdn.net/u010377383/article/details/79838562 前言 为了提升移动端click的响应速度,使用了fastclick.js ...
随机推荐
- Linux record
1.设置ubuntu密码刚安装好的ubuntu系统,没有root密码,需要用户去手动设置的. sudo passwd root 输入2次密码即可. 2. Linux下is not in the sud ...
- 常用HTTP状态码总结
HTTP状态码(HTTP Status Code) 1xx(临时响应) 表示临时响应并需要请求者继续执行操作的状态代码. 代码 说明 (继续) 请求者应当继续提出请求. 服务器返回此代码表示已收到请求 ...
- 安卓 apk 嵌入H5页面只显示部分
安卓 apk 嵌入H5页面只显示部分(有空白页出现) 解决方案 没有加载的是js部分,需要在安卓那边加上一串代码 webView.getSetting().setDomStorageEnabled(t ...
- Fiddler抓包工具怎么设置HTTPS抓包
最近在学习使用 Fiddler 抓包工具时遇到一个问题,Fiddler 默认只对 HTTP 协议进行抓包,如果出现下图提示,则需要进行相应设置才可以抓包HTTPS 具体步骤 ①:Tools-Optio ...
- Mysql 错误:Duplicate entry '0' for key 'PRIMARY'
[1]添加数据报错:Duplicate entry '0' for key 'PRIMARY' (1)问题现象 SQL 语句如下: DROP TABLE test_distinct; CREATE T ...
- WebStrom安装Markdown插件
安装步骤 File→Settings→Plugins→关键字搜索markdown→选择Markdown Navigator→点击Install→出现下载弹窗,等待下载完毕→重启Webstrom 效果预 ...
- sql比较字符串,比的到底是什么?
sql里有nvarchar类型的日期数据time1:2019-10-09 00:00:00, 现给定string类型日期time2:2019-10-01 23:59:59,比较两个日期的大小, 发现可 ...
- VS报错,Metadata file 'xxx.dll' could not be found
错误提示“Metadata file 'xxx.dll' could not be found”步骤如下:1.右键单击解决方案,然后单击“属性”.2.单击左侧的配置.3.确保选中了它找不到的项目的“生 ...
- from import语句
*)假如导入出现了问题,那么一定是导入的文件里的语法问题或者其他问题 参考链接:http://www.cnblogs.com/hwf-73/p/5493328.html 1)导入时重命名 as fro ...
- HDU2023求平均成绩 - biaobiao88
题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=2023 求平均成绩 Problem Description 假设一个班有n(n<=50)个学生,每 ...