在TypeScript事件处理程序中使用$(this) [英] using the $(this) in event handler with typescript

问题描述

我在stackoverflow中看到了很多答案，但答案都是错误的，我想至少对我自己说清楚. 旧的问题:在事件处理程序中将$(this)与打字稿一起使用.大部分答案是关于使用event.target

I saw many answers in the stackoverflow that were answered wrong and I wanted to make it clear at least for myself. the old question: using the $(this) in event handler with typescript. most of the answer was about using event.target

第一个问题是不仅是event.target(堆栈溢出中的大多数答案).我也需要检查IE专用术语(记住jquery至少几天之前就知道的人).

The first problem is it's not only the event.target (most of the answer in stack overflow). I need to check for IE specific terms too (anyone that remember days before jquery at least knows that).

第二个问题是传播. 可以说我有一些这样的元素

the second problem is propagation. let say I have some elements like this

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

我像这样在a上创建了一个点击事件:

and i created a click event on a like this:

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

如果在适当单击的情况下在此元素周围有足够的填充和边距，我可以将目标作为三个元素之一a，i，span

if there is enough padding and margin around this elements with proper clicking i can get the target as either of three elements a, i, span

现在头痛开始了，那么我需要检查一下它单击的是a还是span甚至是i

now the headache will start, then I need to check what it clicked, is it the a or the span or even the i

如果我可以访问$(this)，它会带来一些不必要的冗余代码. $(this)的优点在于，它可以通过浏览器返回我正在听的内容！

time to time it bring redundant codes that was not needed if i could access to $(this). the beauty of $(this) is that it is returning the item that I was listening to, cross browser!

$(this)始终引用a，而不引用其他任何子元素.因此，例如，我知道是否要访问i，我需要在子元素中进行搜索.但是以Typescript让我使用事件的方式，我需要检查我在DOM中的位置(目标是span或a或i !!!)，然后我决定爬升或下降树或在当前元素中进行更改.

in my case $(this) always reference to a and not any of the other child element. so i know for example if I want to access the i i need to search in child elements. but in the way that Typescript make me to use event i need to check where in the DOM i am (target is span or a or i !!!), then I decide to climb or get down in the tree or do the changes in the current element.

我知道应该有更好的方法.所以问题是什么?

I know there should be a better way. so the question is what is it?

推荐答案

答案就在于实例方法，

与普通方法和实例方法及其this不同.这种差异让我可以访问类实例中的this和jquery中的this.

from typescript 0.91 there is a different between normal methods and instance methods and its this. this difference let me to access to both this in class instance and this in 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); 
        });
    }
}

这篇关于在TypeScript事件处理程序中使用$(this)的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！