javascript - 您可以在 Internet Explorer 上捕获这些单选按钮事件吗？

Question

考虑这个示例代码:

<div class="containter" id="ControlGroupDiv">
  <input onbeforeupdate="alert('bingo 0'); return false;" onclick="alert('click 0');return false;" id="Radio1" type="radio" value="0" name="test" checked="checked" />  
  <input onbeforeupdate="alert('bingo 1'); return false;" onclick="alert('click 1');return false;"  id="Radio2" type="radio" value="1" name="test" />   
  <input onbeforeupdate="alert('bingo 2'); return false;" onclick="alert('click 2');return false;"  id="Radio3" type="radio" value="2" name="test" />   
  <input onbeforeupdate="alert('bingo 3'); return false;" onclick="alert('click 3');return false;"  id="Radio4" type="radio" value="3" name="test" />   
  <input onbeforeupdate="alert('bingo 4'); return false;" onclick="alert('click 4');return false;"  id="Radio5" type="radio" value="4" name="test" />   
  <input onbeforeupdate="alert('bingo 5'); return false;" onclick="alert('click 5');return false;"  id="Radio6" type="radio" value="5" name="test" />   
</div>

在 FireFox 2 和 3 上，将 return false 放在单选按钮的单击事件上可以防止它的值以及组中所有其他单选按钮的值发生变化。这有效地使其成为只读状态，而不会禁用它并将其变为灰色。

在 Internet Explorer 上，如果另一个单选按钮被选中并且您单击组中的另一个单选按钮，则在您单击的按钮上触发 click 事件之前，选中的按钮将被清除。但是，由于点击事件的“return false”，您点击的那个没有被选中。

According to MSDN , onbeforeupdate事件在点击事件触发之前在控制组中的所有控件上触发，我认为这是另一个单选按钮被清除的地方。但是，如果您尝试上面的代码，onbeforeupdate 事件不会显示任何警报 - 您只会收到点击事件警报。显然，该事件永远不会被触发，或者没有办法捕获它。

是否有任何事件可以让您阻止清除组中的其他单选按钮？

请注意，这是一个简化的示例，我们实际上是在使用 jQuery 来设置事件处理程序并进行处理。

更新:

如果您将此事件添加到其中一个单选按钮:

onmousedown="alert('omd'); return false;"

警报框弹出，您将其关闭，点击事件永远不会触发。所以我们认为我们已经弄清楚了，但不，它不可能那么容易。如果您删除警报并将其更改为:

onmousedown="return false;"

这是行不通的。另一个单选按钮被清除，您点击的按钮上的点击事件触发。 onbeforeupdate 仍然不会触发。

我们认为这可能是时间问题(这始终是一个理论，尽管它很少是真的)，所以我尝试了这个:

onmousedown="for (i=0; i<100000; i++) {;}; return false;"

你点击，它暂停了一会儿，然后另一个单选按钮被清除，然后点击事件被触发。啊!

更新:

Internet Explorer 很糟糕。除非有人想出一个好主意，否则我们将放弃这种方法并使用复选框 jQuery 扩展，它确实可以满足我们的要求，但会给页面带来更重的客户端脚本负担，并且需要对 HTML 进行更多重新编码，因为ASP.Net 服务器控制呈现和母版页名称修改。

Answer 1

是的，这是一个奇怪的错误。我确实想出了一个解决方法。我在这里使用了一些 Prototype 来处理类名。它适用于 IE 和 FF。您可以使用选择器而不是粗略的循环来缩短它。

<form name="f1">
<input type=radio onmouseover="recordMe()" onclick="clickCheck();return false" checked value="A" name="r1" id="radio1" />
<input type=radio onmouseover="recordMe()" onclick="clickCheck();return false" value="B" name="r1" id="radio2" />
</form>
<script type="text/javascript">
function recordMe() {
    for(var x=0;x<document.f1.r1.length;x++) {
        if(document.f1.r1[x].checked) {
            $(document.f1.r1[x].id).addClassName('radioChecked')
        }
    }
}
function clickCheck() {
    for(var x=0;x<document.f1.r1.length;x++) {
        if($(document.f1.r1[x].id).hasClassName('radioChecked')) {
            $(document.f1.r1[x].id).checked=true
        }
    }
}
</script>