javascript - a标签绑定onclick事件，取不到$(this)

问题描述

问 题

<a class="no-config" onclick="modifyNameA();">A标签</a>

function modifyNameA() {
    if (openFlag == 'm') {
        $(this).hide();
        $(this).siblings('input').show().focus();
    }
}

A绑定了modifyNameA()事件后，在事件中使用$(this)，取不到这个a元素，请问原因与解决办法。

解决方案

不建议使用 onclick 之类的属性绑定事件监听，你现在遇到的问题就是问题之一。

如果使用 onclick 属性绑定事件，实际上相当于下面的代码：

function mondifyNameA () {
...
}

var a = document.querySelector('.no-config');
a.onclick = function () {
  eval('modifyNameA()');
};

这样能看出为什么 modifyNameA() 中获取到的 this 是错误的了吧？因为 this 指向了 window 对象。所以上面的朋友给的建议是 ：

<a class="no-config" onclick="modifyNameA(this);">A标签</a>

再修改modifyNameA()方法接收一个参数，这样上面的代码就变成了:

function mondifyNameA (ele) {
...
}

var a = document.querySelector('.no-config');
a.onclick = function () {
  eval('modifyNameA(this)');
};

这样就可以在 modifyNameA() 方法中通过参数获取到标签了，但这样的修改 this 指向的还是 window 对象。实际上只是解决了如何获取标签的问题，并没有解决 this 指向的问题。那有没有办法使用 this 正确获取到标签呢？如果理解了上面的代码，其实是有方法的，如 :

<a class="no-config" onclick="modifyNameA.call(this)">A标签</a>

我在想你都使用了 jQuery 了，为什么还用属性绑定事件而不使用 jQuery 的 onclick() 或 bind() 之类的方法，那你就不会遇到现在的问题了。

这篇关于javascript - a标签绑定onclick事件，取不到$(this)的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！