为什么这一行JS在Firefox中不起作用

Why does this one-line JS not work in Firefox?

本文关键字：JS Firefox 不起作用 一行 为什么      更新时间：2023-09-26

http://jsfiddle.net/Gch83/

<input id="myRadioButton1" name="radiobutton" value="radiobutton" type="radio">1
<input id="myRadioButton2" name="radiobutton" value="radiobutton" type="radio">2
<input value="1 checked" onMouseOver="document.all.myRadioButton1.checked = true;" type="button">
<input value="2 checked" onMouseOver="document.all.myRadioButton2.checked = true;" type="button">

将鼠标悬停在按钮上会更改Chrome中的单选按钮，但不会更改Firefox。

为什么会这样？

不要使用document.all，而应该使用document.getElementById()！

使用

<input value="1 checked" onMouseOver="document.getElementById('myRadioButton1').checked = true;" type="button">
<input value="2 checked" onMouseOver="document.getElementById('myRadioButton2').checked = true;" type="button">

原因是document.all不受FF支持，因为它是由IE引入的，并且不是标准的DOM。

演示可以在这里找到。

使用document.getElementById(id)而不是document.all

只需这样做：

http://jsfiddle.net/duante/Gch83/2/

document.all只有在页面处于怪癖模式时(这是你绝对不想进入的模式(才能在Firefox中工作。

不要使用document.all。

它创建于W3C标准化getElementById()之前。

document.all是Microsoft Internet Explorer 的专有功能

来源。

请改用符合W3C标准的现代方法。

var checkbox = document.getElementById('my-checkbox');
document.getElementById('my-button').addEventListener('mouseover', function() {
   checkbox.checked = true;
}, false);

你需要对IE的CCD_ 10做一些研究。

基本上说，文档.all的使用是非标准的。

事实上，这是javascript程序员应该避免的事情。它是InternetExplorer4(大约1997年！(的遗迹，之所以被包括在内，是因为当时有一些非常基本的DOM API尚未标准化(例如document.getElementById(。如果现代浏览器支持这些旧的DOM API中的任何一个，那只是为了与非常旧的程序兼容。WebKit仍然会返回document.all的HTMLCollection类型，这就是为什么您注意到您的代码可以在Chrome浏览器中工作的原因。但现代版本的Firefox已经故意决定放弃对它的支持，而是返回未定义的值。

这里推荐的方法是使用document.getElementById来获取对要控制的元素的引用(您可以向第二对元素添加id(，然后从javascript在这些元素上注册事件处理程序。

相关文章：