您能在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上，如果另一个单选按钮被选中，而您点击组中的其他单选按钮，则在单击所单击的按钮之前，选中的按钮会清除。但是，由于单击事件中的'return false'，所单击的那个按钮不会被选择。

根据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扩展，它确实可以做到我们想要的，但会给页面带来更重的客户端脚本负担，并且需要由于ASP.Net服务器控件渲染和主页名称混淆而进行更多的HTML重新编码。

- CMPalmer

Answer 1

是的，这是一个奇怪的bug。我设法想出了一种解决方法。我在这里使用了一些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>

- Diodeus

Answer 2

我也遇到了这个问题。我们目前使用jquery，所以我用它来重新检查适当的复选框。显然，您不需要jquery来设置复选框的属性。

function something(type){//type can be 1 or 0
     if(confirm("You will lose all unsaved changes. Continue?")){
     //Do stuff
          switch(type){
               case 1:
                break;
               case 0;
                break;
                default:
                //nothing;
                 break;
          }//!End of switch 
      }else{//They clicked canel
      //Reset checkboxes in IE
          if(type==1){$('#IDofCheckbox1').attr('checked', true);}
          else{$('#IDofCheckbox2').attr('checked', true);}
      }//!End of if they clicked cancel

- Brad Moore

Answer 3

与其将onclick属性设置为return false，您可以将未选择的单选按钮设置为disabled。这会给您相同的效果，只不过未选择的单选按钮会变灰。

- dpolican

Answer 4

这些方法都没有奏效 - 我们最终使用了复选框 jQuery 插件，用可移动的图像替换了复选框和单选按钮。这意味着我们可以控制禁用控件的视图。

虽然有点麻烦，但它确实起作用了。

- CMPalmer

Answer 5

你的目标是什么？如果你只想捕获更改时的事件，可以在onclick事件上运行你的逻辑。（这样可以避免IE在onchange上的bug）

如果你试图改变单选按钮的预期行为-我强烈建议不要这样做。

- scunliffe

---

我们唯一要做的事情就是根据客户要求，不使禁用的单选按钮和复选框变灰。这对于所有浏览器上的所有复选框来说都是一个快速简便的解决方案，对于除IE之外的所有单选按钮也是如此（当然）。 - CMPalmer

呵呵呵，我喜欢客户的要求！- 我想让我不能点击的东西看起来和我可以点击的东西完全一样。- 没有意义！;-) - scunliffe

啊，在这种情况下，我也无法争辩太多。灰色的勾选框很难读取，而Firefox/IE以不同的方式呈现相关标签（包括IE非常恼人的方式，将灰色文字转换为凿刻式的“3D”，在除了白色之外的任何颜色下看起来都像垃圾）。 - CMPalmer

正如另一个帖子中的某个人所说，用“是/否”、“真/假”文本替换并不像选中的框或单选按钮那样在视觉上易于识别，而且表单的其余部分明显是只读的，没有被变灰，那么为什么勾选/单选控件应该不同呢？ - CMPalmer