Question

为什么console.log（this）= window而不是＆＃34;包装＆＃34; -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>

Answer 1

我使用箭头函数，因为这会将它绑定到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');
});

＆＃34;这＆＃34;等于窗口而不是我的wrapper-div

1 个答案: