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迭代节点列表

window.localStorage.setItem('test','test');

localStorage.test2='test2';

localStorage.setItem('test3','test3');

Answer 2

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

也就是说，这是使您更接近原始JS版本代码的目标的方法。

答案使用spread operator将您从getElementsByTagName获得的nodeList转换为数组，然后使用forEach()遍历数组项。对于每一项，我们为focus添加两个event listeners.，为blur添加一个。

重点突出时，我们添加属性。当模糊时，我们删除该属性。我选择了set attribute和remove attribute，但也可以根据需要使用dataset。

为了确定i（方法）是什么，我使用了let和一个ternary operator。

我仍然不确定为什么要在按下键盘上的某个键时覆盖该方法，所以我还是放弃了。如果您让我知道所需的效果，我可以改善。

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");
        });
    }

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

如何将此jQuery代码转换为纯JavaScript？

3 个答案: