为什么这个 event.target.previousElementSibling 不起作用？

Question

所以我得到了这个代码

                    <div class="col-lg-12 video-meta">
                    <div class="container">
                        <span class="views"><i class="far fa-eye"></i>{{ Counter::show('post', $post->id) }}</span>

                        <span class="lnd">
                            <a class="like" href="#"><i class="far fa-thumbs-up"></i></a>
                            <a class="like" href="#"><i class="far fa-thumbs-down"></i></a>
                        </span>

我用

瞄准它

        $('.like').on('click', function(event) {
        event.preventDefault();
        var isLike = event.target.previousElementSibling == null;
        console.log(isLike);

和它 returns "true" 在这两种情况下，为什么？！是否有一个原因？我已经连续使用了 4 个小时，它曾经工作过一次，我没有做任何更改只是休息了一下，然后在我休息后它就没有工作了？我认为这是一个糟糕的笑话。我在这里错过了什么？

它基本上应该采用 "like" class，并且由于第一个标签没有 previousSiblingElement 为空，它应该 return 为真，但第二个标签有一个元素与兄弟姐妹相同的标签，仍然 return 正确..

Answer 1

event.target 是 <i> 元素，因为这是真正发生点击的元素。

如果您想要 <a>（您在其上附加了事件处理程序），您需要请求 event.currentTarget 甚至只是 this:

$('.like').on('click', function(event) {
  event.preventDefault();
  console.log(event.target); // <i>
  
  var isLike = event.currentTarget.previousElementSibling == null;
  console.log(isLike);
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="col-lg-12 video-meta">
  <div class="container">
    <span class="lnd">
      <a class="like" href="#"><i class="far fa-thumbs-up">a</i></a>
      <a class="like" href="#"><i class="far fa-thumbs-down">b</i></a>
    </span>
  </div>
</div>

为什么这个 event.target.previousElementSibling 不起作用？

Why does this event.target.previousElementSibling not work?

javascript

events

target