要求原生js方法
我的代码ULobj.addEventListener(‘click’, 方法名.bind(this, json参数字符串 ));
你打印一下绑定事件的 event 你就知道了，可以从 Event.target 上面获取到对最初分发事件的对象的引用。
但是我找了一圈没有找到元素下标相关的信息，所以如果可以的话，可以直接在 li 元素上面绑定一下自定义的 index 属性，然后去获取：<ul id=”demo”> <li index=”1″>one</li> <li index=”2″>two</li> </ul> <script> const el = document.getElementById(“demo”); el.addEventListener(“click”, (event) => { console.log(`Clicked li index: ${event.target.attributes.index.value}`); }); </script>
但是这样我觉得有点怪怪的，去问了一下GPT有什么其他的方式，但是回答更简单粗暴，直接用 querySelectorAll 获取到全部 li 元素之后通过 indexOf 来获取下标信息……<ul id=”demo”> <li index=”1″>one</li> <li index=”2″>two</li> </ul> <script> const el = document.getElementById(“demo”); el.addEventListener(“click”, (event) => { const clickedLi = event.target; const liElements = Array.from(el.querySelectorAll(‘li’)); const clickedIndex = liElements.indexOf(clickedLi); console.log(`Clicked li index: ${clickedIndex}`); }); </script>
在绑定事件中，可以通过 event.target 拿到点击的目标元素，再通过 target.parentElement.children 可以拿到目标元素的父元素下所有子元素列表，即可找出当前点击的元素为第几个，示例如下：<ul id=”demo-ul”> <li>第0项</li> <li>第1项</li> <li>第2项</li> </ul>document.getElementById(“demo-ul”).addEventListener(“click”, function (event) { const li = event.target; const index = Array.from(li.parentElement.children).indexOf(li); console.log(`点击了第${index}项`); });
当然，实际情况中 li 下不一定只是单纯的文字，可能还嵌套了其他元素，那么可以通过 event.target.closest("li") 找到目标元素或其父元素中最近的 li 元素，然后再做判断即可，示例如下：document.getElementById(“demo-ul”).addEventListener(“click”, function (event) { const li = event.target.closest(“li”); const index = Array.from(li.parentElement.children).indexOf(li); console.log(`点击了第${index}项`); });
如果 LI 中有多层元素，需要找到最外层的 li，也就是指定 UL 的直接子元素那个 LI。下面的代码是假设 LI 中不会再嵌套 LI 的情况，处理起来会简单一些。const ulObj = document.getElementById(“ulObj”); ulObj.addEventListener( “click”, (e) => { const li = findLi(e.target, ulObj); if (!li) { return; } const idx = […ulObj.children].indexOf(li); console.log(idx); } ); function findLi(target, ul) { for (let el = target; !!el; el = el.parentNode) { if (el.tagName === “LI”) { return el; } if (el === ul) { return; } } }
