"this" ist gleich Fenster statt meiner Wrapper-div

Warum sind console.log (this) = Fenster statt der "Wrapper" -div? Ich benutze eine Pfeilfunktion, weil das das an das div binden würde?"this" ist gleich Fenster statt meiner Wrapper-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>

Quelle

2017-01-18 Adam

* "Ich benutze einen Pfeil Funktion, weil dass dies auf die div binden würde? "Es ist genau das Gegenteil. Related: [Pfeilfunktion vs. Funktionsdeklaration/Ausdrücke: Sind sie äquivalent/austauschbar?] (Http://stackoverflow.com/q/34361379/218196) –

Ich benutze einen Pfeil Funktion, weil dass dies auf die div binden würde?

Nein, Pfeil Funktionen dicht über dem this, wo sie definiert sind, und this ist nicht der div, wo Sie diese Pfeil Funktion sind zu schaffen. Außerdem haben Pfeilfunktionen keinen eigenen this (weil sie sich darüber schließen), so dass der Ereignismechanismus ihn nicht mit der korrekten this aufrufen kann, wie es normalerweise der Fall wäre. Verwenden Sie stattdessen eine normale Funktion oder verwenden Sie slider anstelle von this.

Mit einer normalen Funktion:

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

Mit slider (nur der Vollständigkeit halber, Sie schon waren):

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

Quelle

2017-01-18 13:55:59

"this" ist gleich Fenster statt meiner Wrapper-div

Antwort

Verwandte Themen