如何将此 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

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

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

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

聚焦时，我们添加属性。 当模糊时，我们删除属性。 我选择了set attribute和remove attribute ，但如果你愿意，你也可以使用dataset 。

为了确定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");
        });
    }

顺便感谢所有帮助过我的人！