鼠标事件日志...是否有一个元素相对于其父元素的位置的引用？

问题描述 投票：0回答：3

我花了最后几个小时通过控制台中的鼠标e（事件日志），试图找到一些引用相对于父ul元素点击的li的位置。

我的意思是，如果我点击li 4是否有一些我可以参考的东西告诉我它是ul中的第五个li？

我更愿意在没有添加属性data-src =“5”的情况下访问该位置，然后以这种方式获得位置，但我认为在我走这条路之前我会问...

似乎事件捕获了所有内容，但我无法找到li [5]我在事件列表中寻找它。感谢您的帮助 - CES

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>Working </title>
    <style>
        ul{width:450px; margin:auto;}
        li {float:left;cursor:pointer;}
        div{width:150px; height:150px;}
    </style>
    <script>
        function init() {
            var objList = document.querySelector("#id_ScrollToNav")
            console.log(objList);
            objList.addEventListener('click', function (e) {
                console.log(e);
                e.stopPropagation();
            }, false);
        }
    </script>
</head>
<body onload="init()">
    <header>
        <nav id="frameNavBox">
            Some Nav stuff
        </nav>
    </header>
    <main>
        <ul id="id_ScrollToNav">
            <li><div>0</div></li>
            <li><div>1</div></li>
            <li><div>2</div></li>
            <li><div>3</div></li>
            <li><div>4</div></li>
            <li><div>5</div></li>
            <li><div>6</div></li>
            <li><div>7</div></li>
            <li><div>8</div></li>
        </ul>
    </main>
</body>
</html>
javascript mouseevent
3个回答
0
投票

只需记录li元素的innerhtml，尽管每个li元素都需要一个id。然后创建一个函数，找到你用它的ID点击的li的innerHTML。

function clickThis(id) {
  const list = document.getElementById('list');
  const li = document.getElementById(id);
  console.log(li.innerHTML);
}
li {
  cursor: pointer;
}
<!DOCTYPE>
<html>
  <head>
  </head>
  <body>
    <ul id="list">
      <li id="zero" onclick="clickThis('zero')">0</li>
      <li id="one" onclick="clickThis('one')">1</li>
      <li id="two" onclick="clickThis('two')">2</li>
      <li id="three" onclick="clickThis('three')">3</li>
      <li id="four" onclick="clickThis('four')">4</li>
      <li id="five" onclick="clickThis('five')">5</li>
    </ul>
  </body>

</html>
0
投票

在发表评论之前，我已经对评论中提到的可能重复的帖子进行了跟进，并且Array.indexOf技巧似乎对此非常有用。这是一个工作示例，或here's the fiddle。

function init() {
  var objList = document.querySelector("#id_ScrollToNav")
    objList.addEventListener('click', function(e) {
      var target = e.target.parentNode; // gets to the LI
      var parent = target.parentNode; // gets to the UL
      
      // what is the index of the UL in that LI?
      console.log(Array.prototype.indexOf.call(parent.children, target));
      e.stopPropagation();
    }, false);
  }

// Run it!
init();
#id_ScrollToNav ul {
  width: 450px;
  margin: auto;
}

#id_ScrollToNav li {
  float: left;
  cursor: pointer;
}

#id_ScrollToNav div {
  border: 1px solid #ccc;
  background-color: #999;
  width: 150px;
  height: 150px;
}
<header>
  <nav id="frameNavBox">
    Some Nav stuff
  </nav>
</header>
<main>
  <ul id="id_ScrollToNav">
    <li>
      <div>0<br>Quisque velit nisi, pretium ut lacinia in, elementum id enim. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Donec velit neque, auctor sit amet aliquam vel, ullamcorper sit amet ligula. Cras ultricies ligula sed magna dictum porta. Vivamus suscipit tortor eget felis porttitor volutpat. Praesent sapien massa, convallis a pellentesque nec, egestas non nisi.
</div>
    </li>
    <li>
      <div>1<br>Cras ultricies ligula sed magna dictum porta. Pellentesque in ipsum id orci porta dapibus. Curabitur arcu erat, accumsan id imperdiet et, porttitor at sem. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Donec velit neque, auctor sit amet aliquam vel, ullamcorper sit amet ligula. Vestibulum ac diam sit amet quam vehicula elementum sed sit amet dui.</div>
    </li>
    <li>
      <div>2<br>Quisque velit nisi, pretium ut lacinia in, elementum id enim. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Donec velit neque, auctor sit amet aliquam vel, ullamcorper sit amet ligula. Cras ultricies ligula sed magna dictum porta. Vivamus suscipit tortor eget felis porttitor volutpat. Praesent sapien massa, convallis a pellentesque nec, egestas non nisi.</div>
    </li>
    <li>
      <div>3<br>Quisque velit nisi, pretium ut lacinia in, elementum id enim. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Donec velit neque, auctor sit amet aliquam vel, ullamcorper sit amet ligula. Cras ultricies ligula sed magna dictum porta. Vivamus suscipit tortor eget felis porttitor volutpat. Praesent sapien massa, convallis a pellentesque nec, egestas non nisi.</div>
    </li>
    <li>
      <div>4<br>Quisque velit nisi, pretium ut lacinia in, elementum id enim. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Donec velit neque, auctor sit amet aliquam vel, ullamcorper sit amet ligula. Cras ultricies ligula sed magna dictum porta. Vivamus suscipit tortor eget felis porttitor volutpat. Praesent sapien massa, convallis a pellentesque nec, egestas non nisi.</div>
    </li>
    <li>
      <div>5<br>Quisque velit nisi, pretium ut lacinia in, elementum id enim. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Donec velit neque, auctor sit amet aliquam vel, ullamcorper sit amet ligula. Cras ultricies ligula sed magna dictum porta. Vivamus suscipit tortor eget felis porttitor volutpat. Praesent sapien massa, convallis a pellentesque nec, egestas non nisi.</div>
    </li>
    <li>
      <div>6<br>Quisque velit nisi, pretium ut lacinia in, elementum id enim. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Donec velit neque, auctor sit amet aliquam vel, ullamcorper sit amet ligula. Cras ultricies ligula sed magna dictum porta. Vivamus suscipit tortor eget felis porttitor volutpat. Praesent sapien massa, convallis a pellentesque nec, egestas non nisi.</div>
    </li>
    <li>
      <div>7<br>Quisque velit nisi, pretium ut lacinia in, elementum id enim. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Donec velit neque, auctor sit amet aliquam vel, ullamcorper sit amet ligula. Cras ultricies ligula sed magna dictum porta. Vivamus suscipit tortor eget felis porttitor volutpat. Praesent sapien massa, convallis a pellentesque nec, egestas non nisi.</div>
    </li>
    <li>
      <div>8<br>Quisque velit nisi, pretium ut lacinia in, elementum id enim. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Donec velit neque, auctor sit amet aliquam vel, ullamcorper sit amet ligula. Cras ultricies ligula sed magna dictum porta. Vivamus suscipit tortor eget felis porttitor volutpat. Praesent sapien massa, convallis a pellentesque nec, egestas non nisi.</div>
    </li>
  </ul>
</main>
0
投票

试试这个它打印ul的位置

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>Working </title>
    <style>
        ul{width:450px; margin:auto;}
        li {float:left;cursor:pointer;}
        div{width:150px; height:150px;}
    </style>
    <script>
        function init() {
            var objList = document.querySelector("#id_ScrollToNav")
            console.log(objList);
            objList.addEventListener('click', function (e) {
                var li = e.target.closest('li');
                var parent = li.parentNode;
                var index = Array.prototype.indexOf.call(parent.children, li);
                console.log((index + 1) + 'th element selected');
                e.stopPropagation();
            }, false);
        }
    </script>
</head>
<body onload="init()">
    <header>
        <nav id="frameNavBox">
            Some Nav stuff
        </nav>
    </header>
    <main>
        <ul id="id_ScrollToNav">
            <li><div>0</div></li>
            <li><div>1</div></li>
            <li><div>2</div></li>
            <li><div>3</div></li>
            <li><div>4</div></li>
            <li><div>5</div></li>
            <li><div>6</div></li>
            <li><div>7</div></li>
            <li><div>8</div></li>
        </ul>
    </main>
</body>
</html>

如需更多实验，请使用此fiddle。对于其他可能的方法，请看看这个question

最新问题
© www.soinside.com 2019 - 2024. All rights reserved.