javascript - 选择所有没有 jQuery 的链接和表单

Question

如何在不需要包含 jQuery 的情况下选择所有标签a？form

我最终试图做到以下几点：

$("a").click(function {
    window.onbeforeunload = null;
});

$("form").submit(function {
    window.onbeforeunload = null;
});

但如果有更紧凑的方法可以做到这一点，我真的宁愿不包括 jQuery（甚至 Sizzle.js）。

Answer 1

你可以document.querySelectorAll()这样使用：

var els = document.querySelectorAll( 'a' );
for( var i=els.length; i--; ) {
  els[i].addEventListener( 'click', function(){ window.onbeforeunload = null; } );
}

<form>标签类似。

它在大多数现代浏览器 ( caniuse.com ) 中都可用。

Answer 2

这应该这样做：

var links = document.getElementsByTagName("a"); 
for (var i = 0; i < links.length; i++) { 
    links[i].addEventListener("click", function() { console.log("Clicked"); window.onbeforeunload = null; });
}

要获取表单提交，您可以执行以下操作：

<script>
    do_function() { window.onbeforeunload = null; }
</script>
<form action="" onsubmit="do_function()" method="">

编辑：将两者结合起来：

var links = document.getElementsByTagName("a"); 
for (var i = 0; i < links.length; i++) { 
    links[i].addEventListener("click", function() { console.log("Clicked"); window.onbeforeunload = null; });
}
var forms = document.getElementsByTagName("form");
for (var i = 0; i < forms.length; i++) { 
    forms[i].addEventListener("submit", function() { console.log("Submitted"); window.onbeforeunload = null; });
}

小提琴