javascript - Vanilla Javascript如何检查点击的元素是否是最后一项

Question

我想检查当前单击的元素是否是最后一个元素。这是我到目前为止得到的：

<div class="item" @click="onClick"> Item 1 </div>
<div class="item" @click="onClick"> Item 2 </div>
<div class="item" @click="onClick"> Item 3 </div>
<div class="item" @click="onClick"> Item 4 </div>

然后我的javascript：

onClick(e){
    let clicked = e.target;
 
    let items = document.querySelectorAll('.item');
    let lastchild = items[items.length - 1];

    if(clicked === lastchild) {
       // do something
    }
}

但由于某种原因，这不起作用。我究竟做错了什么？

有人可以帮我吗？

标签： javascriptvue.js

Answer 1

您的代码仅在页面上没有其他.item元素时才有效，因为document.querySelectorAll('.item')返回文档中与选择器匹配的所有元素。

如果您更改选择器的范围，使其仅查询元素的直接父节点，那么它将起作用：请参见下面的示例。

new Vue({
  el: '#app',
  methods: {
    onClick(e) {
      console.log('Item clicked');
      let clicked = e.target;

      let items = clicked.parentNode.querySelectorAll('.item');
      let lastchild = items[items.length - 1];

      if (clicked === lastchild) {
        console.log('Last child clicked');
      }
    }
  }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
  <div class="container">
    <div class="item" @click="onClick"> Item 1 </div>
    <div class="item" @click="onClick"> Item 2 </div>
    <div class="item" @click="onClick"> Item 3 </div>
    <div class="item" @click="onClick"> Item 4 </div>
  </div>
  <hr />
  <div class="container">
    <div class="item" @click="onClick"> Item 1 </div>
    <div class="item" @click="onClick"> Item 2 </div>
    <div class="item" @click="onClick"> Item 3 </div>
    <div class="item" @click="onClick"> Item 4 </div>
  </div>
  <hr />
  <div class="container">
    <div class="item" @click="onClick"> Item 1 </div>
    <div class="item" @click="onClick"> Item 2 </div>
    <div class="item" @click="onClick"> Item 3 </div>
    <div class="item" @click="onClick"> Item 4 </div>
  </div>
</div>