"this"はwrapper-divの代わりにwindowと同じです

なぜ "wrapper" -divではなくconsole.log（this）=ウィンドウですか？これはdivにバインドするので、私は矢印関数を使用しますか？それはdiv要素にこれを結合するので、私は矢印の機能を使用し"this"はwrapper-divの代わりにwindowと同じです

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>

出典

2017-01-18 Adam

*「それはdiv要素にこれを結合するので、私は矢印の機能を使用できますか？ "それは正反対です。関連：[矢印関数と関数宣言/式：それらは等価/交換可能ですか？]（http://stackoverflow.com/q/34361379/218196） –

？

はありません、それらが定義されているthis、およびthisオーバー近い矢印機能を使用すると、その矢印の機能を作成しているdiv要素ではありません。さらに、矢印関数にはthisがありません（閉じているため）、イベント機構は通常のように正しいthisで呼び出すことができません。

通常の関数を代わりに使用するか、thisの代わりにsliderを使用してください。（単に完全性のために、あなたはすでにだった）

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

sliderを使用して：：

正常な機能を使用して

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

出典

2017-01-18 13:55:59

"this"はwrapper-divの代わりにwindowと同じです

答えて

関連する問題