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

问题描述：

如何在不需要包含jQuery的情况下选择所有a和form标签？选择没有jQuery的所有链接和表单

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

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

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

但我真的宁愿不包括jQuery的（甚至Sizzle.js），如果有做一个更紧凑的方式。

['document.getElementsByTagName（）']（https://developer.mozilla.org/en-US/docs/DOM/element.getElementsByTagName） – millimoose 2013-02-12 17:57:07

@Shpigford，请参阅我的编辑。 – Samsquanch 2013-02-12 18:24:07

答

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

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

类似的<form>标签。

它适用于大多数现代浏览器（caniuse.com）。

我得到''undefined'不是'var els = document.querySelectorAll（'a'）;'...的函数'但如果我直接在Web Inspector中运行它，它就可以工作。某种'onload'我需要做的事情，或类似的东西？ – Shpigford 2013-02-12 18:05:42

@Shpigford不需要安装。你在测试哪个浏览器？ – Sirko 2013-02-12 18:11:45

OS X上的Safari 6.0.2 – Shpigford 2013-02-12 18:13:20

答

这应做到：

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

Fiddle

看起来像这个非常好的浏览器支持：https://developer.mozilla.org/en-US/docs/DOM/element.getElementsByTagName – 2013-02-12 17:59:37

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

相关推荐