您的位置：首页技术文章
文章详情页

javascript - JS事件委托问题

浏览：126日期：2022-11-23 16:08:54

问题描述

<!DOCTYPE html><html lang='zh'><head>

<meta charset='UTF-8'><title>Title</title><style type='text/css'> li{list-style: none;cursor: pointer; }</style><script type='text/javascript'> window.onload = function(){var Ul = document.getElementById('ul');var Li = Ul.getElementsByTagName('li');Ul.onclick = function(ev){ var ev = ev || window.event; var target = ev.target || ev.srcElement; if(target.nodeName.toLowerCase() == 'li'){var index = 0;for(var i=0;i<Li.length;i++){ if(Li[i]===target){index=i; };}if(index>=0){ alert(’索引是’+index);} }} }</script>

</head><body>

<ul id='ul'>

<li>首页</li><li>新闻</li><li>娱乐</li>

</ul>

</body></html>

我想问一下，这种用事件委托的方式获取索引的方式，有没有更加简单的方法呢？

问题解答

回答1：

children转换为Array，然后直接调用indexOf。（没考虑兼容性……）

<ul id='ul'> <li>1</li> <li>2</li> <li>3</li></ul>

const ul = document.querySelector(’#ul’)const children = Array.prototype.slice.call(ul.children)ul.onclick = (ev) => { const target = ev.target; console.log(’current index’, children.indexOf(target))}

这里有个例子

标签： JavaScript
上一条：javascript - 怎么通过Html5或者原声js实现图片在线裁剪成圆角矩形？下一条：javascript - 求助canvas绘制马赛克的问题，老是取色不准
相关文章：
1. javascript - [MUI 子webview定位]2. javascript - angularjs怎么获取repeat里的某些$index值?3. javascript - 如何做出pc网站随鼠标滚动动态出现效果4. java - spring-security与微信登录的问题？5. android-studio - android studio 结巴了，有什么办法可以治好它吗？6. 前端 - ng-view不能加载进模板7. docker-compose 为何找不到配置文件？8. Android下，rxJava+retrofit 并发上传文件和串行上传文件的效率为什么差不多？9. javascript - 求解答：实例对象调用constructor，此时constructor内的this的指向？10. html5和Flash对抗是什么情况？
排行榜
docker容器呢SSH为什么连不通呢？
docker容器呢SSH为什么连不通呢？
1. docker gitlab 如何git clone？
2. docker内创建jenkins访问另一个容器下的服务器问题
3. docker-compose 为何找不到配置文件？
4. html5和Flash对抗是什么情况？
5. android-studio - android studio 结巴了，有什么办法可以治好它吗？
6. java - spring-security与微信登录的问题？
7. javascript - 求解答：实例对象调用constructor，此时constructor内的this的指向？
8. 前端 - ng-view不能加载进模板
9. javascript - [MUI 子webview定位]
10. Android下，rxJava+retrofit 并发上传文件和串行上传文件的效率为什么差不多？
热门标签