HTML onclick事件中$(this)失效：jQuery绑定与原生属性结果差异解析

核心问题出在**this的指向不同**，和混用jQuery/原生代码无关：

为什么两种写法结果不同？ #

• jQuery的.on('click', function(){})绑定事件时，回调函数里的this默认指向触发事件的DOM元素（也就是点击的.navBtn按钮）。所以$(this).closest('.videoList')能正确定位到父级的.videoList容器，再找到里面的.slider，最终length为1。
• 而通过HTMLonclick属性调用btnClick()时，函数里的this默认指向全局对象（浏览器环境下是window），不是点击的按钮。$(this)等价于$(window)，window没有.closest('.videoList')对应的父级元素，所以后续.find('.slider')找不到任何元素，length为0。

修复方法 #

方法1：调用时直接传递元素引用 #

修改HTML，把当前元素作为参数传入：

<div class="navBtn" onclick="btnClick(this)">Button</div>

然后修改函数接收这个参数：

function btnClick(el) {
  var length = $(el).closest('.videoList').find('.slider').length;
  alert(`length B = ${length}`);
}

方法2：利用事件对象的target属性 #

修改HTML传递事件对象：

<div class="navBtn" onclick="btnClick(event)">Button</div>

函数里通过event.target获取触发元素：

function btnClick(event) {
  var length = $(event.target).closest('.videoList').find('.slider').length;
  alert(`length B = ${length}`);
}

方法3：改用jQuery统一绑定事件（推荐） #

既然习惯用jQuery，直接保持统一写法即可，避免HTML事件属性带来的this指向问题：

$('.navBtn').on('click', btnClick);

这样btnClick里的this就和第一种写法一致，指向触发按钮，不需要修改函数内部逻辑。

内容的提问来源于stack exchange，提问作者hayley