如何将这个jQuery代码转换为纯JavaScript?

Question

我正在尝试在设置data-attribute的链接上获取焦点方法(触摸、鼠标或键盘(。

$(function() {
var i,
r = document.getElementsByTagName("a")[0];
if ("ontouchstart" in window) {
document.addEventListener("touchstart", function(event) {
i = "touch";
}, true);
}
else {
document.addEventListener("mousedown", function(event) {
i = "mouse";
}, true);
}
document.addEventListener("keydown", function(event) {
i = "keyboard";
}, true);
})

问题是我只得到在jQuery中编写最后一部分的结果：

$("a").focus(function() {
$(this).attr("data-focus-method", i)
})
$("a").blur(function() {
$(this).removeAttr("data-focus-method")
})

我想用普通的JavaScript编写整个代码。我已经尝试了以下方法：

r.addEventListener("focus", function() {
r.setAttribute("data-focus-method", i);
});
r.addEventListener("blur", function() {
r.removeAttribute("data-focus-method");
});

但它不起作用。 有人可以帮我吗？

Answer 1

我建议使用querySelectorAll方法并使用forEach来迭代节点列表

document.querySelectorAll("a").forEach((link) => {
link.addEventListener("focus", function() {
this.setAttribute("data-focus-method", i);
});
link.addEventListener("blur", function() {
this.removeAttribute("data-focus-method");
});
});

Answer 2

我不确定为什么每当按下键盘上的键时，您都会尝试覆盖ion 方法。但是，我假设这是预期的效果，因为您在问题中没有提到它。

也就是说，这里有一些东西可以让你更接近你的代码的原版JS版本的目标。

答案使用展开运算符将你从getElementsByTagName获得的nodeList转换为数组，然后forEach((循环遍历数组项。对于每个项目，我们添加两个事件侦听器。一个用于focus，一个用于blur。

聚焦后，我们添加属性。模糊后，我们删除该属性。我选择了设置属性和删除属性，但如果需要，您也可以使用数据集。

为了确定i(方法(是什么，我使用了 let 和三元运算符。

我仍然不确定为什么要在按下键盘上的键时覆盖该方法，所以我离开了它。如果你让我知道想要的效果是什么，我可以改进它。

let i = ("ontouchstart" in window) ? "touch" : "mouse";
document.addEventListener("keydown", () => {
i = "keyboard"
})
const links = [...document.getElementsByTagName("a")];
links.forEach(link => {
link.addEventListener("focus", () => {
link.setAttribute('data-focus-method', i);
});
link.addEventListener("blur", () => {
link.removeAttribute('data-focus-method');
})
})

<a href="#">My link 1</a>
<a href="#">My link 2</a>
<a href="#">My link 3</a>

Answer 3

我得到了解决方案，添加了：

var w;
for (w = 0; w < r.length; w++) {
r[w].addEventListener("focus", function() {
this.setAttribute("data-focus-method", i);
});
r[w].addEventListener("blur", function() {
this.removeAttribute("data-focus-method");
});
}

顺便说一句，感谢所有帮助过我的人！