社群
學習
工具庫
AI工具
休閒
搜尋
繁体中文
javascript - JS事件委託問題
大家讲道理
大家讲道理 2017-06-08 11:03:05
0
1
607

<!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)
習慣沉默
習慣沉默2017-06-08 11:05:05 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))
}

這裡有個例子

點贊 +0
新增回覆
熱門專題
更多>
熱門文章
熱門教學
更多>
相關教學
熱門推薦
最新課程
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板