我试图将所有<a>个元素绑定为onclick函数.虽然变量a是一个对象,但当我try 在onclick中使用关键字this时,它会返回Window对象.

<!DOCTYPE html>
<html lang="pl">
<head>
    <meta charset='utf-8'>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <meta http-equiv='X-UA-Compatible' content='IE=edge'>
</head>
<body>
<div id="stages">
    <div><p>Część I</p></div>
    <div><a data="audio/01-1-1.mp3">Rozdział  1</a><div></div><p>44:10</p></div>
    <div><a data="audio/02-1-2.mp3">Rozdział  2</a><div></div><p>20:06</p></div>
    <div><a data="audio/03-1-3.mp3">Rozdział  3</a><div></div><p>19:16</p></div>
    <div><a data="audio/04-1-4.mp3">Rozdział  4</a><div></div><p>25:29</p></div>
    <div><a data="audio/05-1-5.mp3">Rozdział  5</a><div></div><p>32:16</p></div>
    <div><a data="audio/06-1-6.mp3">Rozdział  6</a><div></div><p>13:06</p></div>
    <div><a data="audio/07-1-7.mp3">Rozdział  7</a><div></div><p>28:38</p></div>
    <div><a data="audio/08-1-8.mp3">Rozdział  8</a><div></div><p>51:59</p></div>
</div>

<script>
const a = document.querySelector('#stages a')
console.log(a)
a.onclick = () => {
    console.log(this);
}
</script>
</body>
</html>

推荐答案

为了使用this,您需要创建一个常规的匿名函数,而不是箭头函数.

const anchors = [...document.querySelectorAll("#stages a")];

anchors.forEach(a => {
   console.log(a);

   a.onclick = function () {
      console.log(this);
   };
});

Javascript相关问答推荐

如何修复内容安全策略指令脚本-SRC自身错误?

将自定义排序应用于角形数字数组

WebRTC关闭navigator. getUserMedia正确

在拖放时阻止文件打开

你怎么看啦啦队的回应?

XSLT处理器未运行

如何在coCos2d-x中更正此错误

闭包是将值复制到内存的另一个位置吗?

禁用.js文件扩展名并从目录导入隐式根index.js时,找不到NodeJS导入模块

检索相加到点的子项

将Node.js包发布到GitHub包-错误ENEEDAUTH

元素字符串长度html

AJAX POST在控制器中返回空(ASP.NET MVC)

使用类型:assets资源 /资源&时,webpack的配置对象&无效

postman 预请求中的hmac/sha256内标识-从js示例转换

如何在移动设备中使用JAVASSCRIPT移除点击时的焦点/悬停状态

如何在Reaction中设置缺省值, Select 下拉列表,动态追加剩余值?

如果未定义,如何添加全局变量

带有JS模块模式的Rails的Importmap错误:";Net::ERR_ABORTED 404(未找到)&Quot;

如何根据获取的对象数量动态生成状态变量