"this"等于窗口而不是我的包装 div

为什么控制台.log（this）=窗口而不是"wrapper"-div？我使用箭头函数，因为这会将其绑定到div？

const slider = document.querySelector(".wrapper");
let isDown = false;
slider.addEventListener('mousedown', () => {
  console.log(this);
  isDown = true;
  slider.classList.add('active');
});
<!DOCTYPE html>
<html lang="sv">
  <head>
    <title>Drag and drop</title>
    <meta charset="utf-8">
    <link rel="stylesheet" href="main.css">
  </head>
  <body>
   <div class="wrapper">
     <div class="item item1">1</div>
     <div class="item item2">2</div>
     <div class="item item3">3</div>
     <div class="item item4">4</div>
     <div class="item item5">5</div>
   </div>
    <script src="main.js"></script>
  </body>
</html>

我使用箭头函数，因为这会将其绑定到div？

否，箭头函数在定义它们的this上关闭，并且this不是创建该箭头函数的div。此外，箭头函数没有自己的this（因为它们关闭它），因此事件机制无法像往常一样使用正确的this调用它。

请改用普通函数，或使用 slider 代替 this 。

使用普通函数：

slider.addEventListener('mousedown', function() { // ***
  console.log(this);
  isDown = true;
  this.classList.add('active');
});

使用slider（只是为了完整;你已经是）：

slider.addEventListener('mousedown', () => {
  isDown = true;
  slider.classList.add('active');
});

相关内容

最新更新

热门标签：