使用addEventListener

Question

我试图通过单击第一个元素来切换第二个元素，但没有将第二个元素作为交互元素，但它不起作用。我做错了什么？元素.timage应该会更改自身，元素. rimage在选中时也会更改，但只有元素.timage应该是可单击的。

​

function myFunction(x) {
  if (x.target.matches('.timage'))
    this.classList.toggle('change');
}
document.querySelector('.container4').addEventListener('click', myFunction);

.container4 {
  cursor: pointer;
  display: inline- block;
}

.timage {
  position: relative;
  left: 50px;
}

.change .timage {
  left: 200px;
}

.rimage {
  position: relative;
  left: 200px;
}

.change .rimage {
  position: relative;
  left 500px;
}

<a id="mobile-nav" href="#">
  <div class="container4" onclick="myFunction
    (this,event)">
    <div class="container4">
      <div class="timage"><img class="size-medium wp- 
    image-13846" src="http://4309.co.uk/wp-  
    content/uploads/2020/05/
    IMG_20200509_104613- 
    288x300.jpg" alt="" width="70" height="300" />.
      </div>
      <div class="rimage">
        <img class="size-medium wp- 
    image-13669" src="http://4309.co.uk/
    wp-content/uploads
    /2020/05/IMG_20200508_1
    30758-287x300.jpg" alt="" width="90" height="300" />.
      </div>
    </div>
</a>

​

Answer 1

您可能单击的是img，而不是图像所在的div，所以event.target就是img。

要查找与选择器匹配的最近祖先(从当前元素开始)，请使用closest。

您还可以在onclick="myFunction(this,event)"和addEventListener调用中使用myFunction。它们将为函数提供不同的参数。删除onclick，只使用addEventListener。

下面是更新后的函数：

function myFunction(x) {
  const timage = x.target.closest(".timage");
  if (timage && this.contains(timage)) {
    this.classList.toggle('change');
  }
}

使用contains的原因只是完整性，在很多情况下，您可以不使用它:它是为了防止closest越过容器元素并在容器的祖先中找到匹配项。这不会发生在您的布局中，因为timage只与容器一起使用，但对于更一般的情况，我包含了该检查。例如：

<div class="x">
    <div id="container">
        <div class="x">xxx</div>
        <div class="y">yyy</div>
    </div>
</div>

在那里，如果我将click挂接到#container上，并且用户单击了yyy，而我正在执行const x = event.target.closest(".x")，那么我将获得容器的父对象.x。所以this.contains(x)把它们剔除了。