typescriptのイベントハンドラで$（this）を使用

私はstackoverflowで多くの答えを見て間違った答えを出しました。少なくとも私はそれを明確にしたかったのです。以前の質問：typescriptで$（this）をイベントハンドラで使用する。答えのほとんどは使用についてでしたevent.target

第1の問題は、event.target（ほとんどの回答がスタックオーバーフローであること）です。私はIEの特定の条件についてもチェックする必要があります（jqueryが少なくともそれを知っている前の日を覚えている人）。

第2の問題は伝播です。 letが、私はこの

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

のようないくつかの要素を持っていると私はこのようなaにクリックイベントを作成したと言う：

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

十分なパディングとマージンが適切クリックすると、この要素の周りに存在する場合、私は得ることができます3つの要素のいずれかのターゲットa,i,span

ここで頭痛が始まり、次にクリックしたものを確認する必要があります。aまたはspan、さらにはi

$（this）にアクセスするには不要な冗長コードを持ってくるまでに時間がかかることがあります。 $（これ）の美しさは、私が聞いていたアイテムを返す、クロスブラウザです！

私の場合、$（これ）は常にaを参照し、他の子要素は参照しません。だから私は、例えば私がiにアクセスしたいと思っているのを知っています。私は子要素で検索する必要があります。しかし、Typescriptが私にイベントを使用させる方法では、私はDOMのどこにいるかを調べる必要があります（ターゲットはspanまたはaまたはiです）、ツリーに登るか下ろすか、現在の要素

もっと良い方法があるはずです。それで問題は何ですか？

出典

2016-07-02 Mo Hrad A

ウェル答えは、通常の方法とインスタンスメソッドとそのthis間で異なるがあるtypescriptです0.91から、インスタンスメソッドで

に横たわっていました。この違いは、クラスインスタンスとjqueryの両方でこれにアクセスできるようにしました。

サンプルクラスは次のようになります：あなたは添付リンクとして

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); 
     }); 
    } 
}

出典

2016-07-02 12:06:04