mit dem $ (this) in Event-Handler mit Typoskript

Question

Ich sah viele Antworten in der Stackoverflow, die falsch beantwortet wurden und ich wollte es zumindest für mich klar machen. die alte Frage: Verwenden der $ (this) in Event-Handler mit Typoskript. die meisten der Antwort war über die Verwendung event.target

Das erste Problem ist, es ist nicht nur die event.target (die meisten der Antwort in Stack-Überlauf). Ich muss auch nach IE-spezifischen Begriffen suchen (jeder, der sich daran erinnert, dass Tage bevor jQuery das zumindest weiß).

das zweite Problem ist die Ausbreitung. Lassen Sie sagen, ich habe einige Elemente wie diese

<a href="#"><i class="fa fa-open"><span>something is here</span></i></a> 

und i erstellt ein Click-Ereignis auf a wie folgt aus:

$("a").click((evt)=>{ 
    evt = evt || window.event; 
    var target = evt.target || evt.srcElement; 
    console.log($(target)); 
}); 

, wenn es genügend Polsterung und Marge um diese Elemente mit der richtigen Klick kann ich bekommen das Ziel als eines von drei Elementen,

Jetzt wird die Kopfschmerzen beginnen, dann muss ich überprüfen, was es geklickt hat, ist es die a oder die span oder sogar die i

von Zeit zu Zeit bringt es redundante Codes, die nicht benötigt wurde, wenn ich auf $ (this) zugreifen könnte. die Schönheit von $ (this) ist, dass es das Item zurückgibt, das ich hörte, cross browser!

in meinem Fall $ (this) immer Verweis auf a und nicht eines der anderen Kind-Element. So weiß ich zum Beispiel, wenn ich auf die i zugreifen möchte, muss ich in untergeordneten Elementen suchen. aber in der Art, wie Typoskript mich dazu bringt, Event zu verwenden, muss ich überprüfen, wo im DOM ich bin (Ziel ist span oder a oder i !!!), dann entscheide ich mich zu klettern oder runter in den Baum oder mache die Änderungen in das aktuelle Element.

Ich weiß, es sollte einen besseren Weg geben. Also ist die Frage, was ist das?

Answer 1

auch die Antwort auf Instanzmethoden lag,

von Typoskript 0,91 zwischen normalen Methoden und Instanzmethoden und seinem this eine andere ist. Dieser Unterschied erlaubt mir, sowohl auf diese in der Klasseninstanz als auch auf diese in jquery zuzugreifen.

eine Beispielklasse würde so aussehen:

class sample{ 

    field1:number; 

    constructor(){ 
     field1=1; 
    } 

    method1(){ 

     let self=this; 
     $("a").click(function(event){  
      var target=$(this); 
      console.log(target); // here i have access to the jquery one 
      console.log(self.field1); // here i have access to the class level 
     }); 
    } 

    method2(){ 

     $("a").click((event)=>{  
      var target=$(this); // this will not work bcs it's an instance method 
           // the this is refering to the class 

      console.log(target); 
     }); 
    } 
} 

Answer 2

Ich glaube, Sie event.currentTarget statt Ziel verwenden möchten:

https://developer.mozilla.org/en-US/docs/Web/API/Event/currentTarget

ps: Haben Sie wirklich IE8 unterstützen? Google, Microsoft und alle unterstützen es auf den meisten ihrer Websites nicht einmal mehr.