我很难使它在IE7（和IE8）中正常工作。它非常简化了复杂脚本的一部分。因此请记住，方法和结构不能太多更改。
在IE7中，选择一种类型时会出现无限循环。在FF，Chrome和IE9中，效果很好。它也可以与IE7 / IE8中的mootools 1.1库一起使用，但是由于我将其转换为Mootools 1.4，所以出现了循环问题。
也许在框架中发生了某种事件委托更改。我真的不知道非常感谢您的帮助！
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>eventz</title>
<script src="https://ajax.googleapis.com/ajax/libs/mootools/1.4.5/mootools-yui-compressed.js" type="text/javascript"></script>
<script type="text/javascript">
var eventz = new Class({
options: {
},
initialize: function(options) {
this.setOptions(options);
this.setup();
this.jx = 0;
},
setup: function() {
this.makeEvents();
// ...
},
makeEvents : function() {
alert("init");
var finputs = $$('.trig');
finputs.removeEvents('change');
finputs.removeEvents('click');
finputs.each(function(r) {
$(r).addEvents({
'change': function(e) {
//e.preventDefault();
alert(r.name);
new Event(e).stop();
this.refresh(r); // this needs to stay as refresh calls some ajax stuff
}.bind(this)
});
}.bind(this));
// ...
},
// refresh is called from various methods
refresh : function(el) {
if(el) {
// count types checkboxes
var ob_checked = 0;
$$('.otypes').each(function(r) {
// uncheck all if clicked on "All"
if(el.id == 'typ-0') {
r.checked = false;
}
r.checked == true ? ob_checked++ : 0 ;
})
// check "All" if non selected
if(ob_checked == 0) {
$('typ-0').checked = true;
}
// uncheck "All" if some selected
if(el.id != 'typ-0' && ob_checked != 0) {
$('typ-0').checked = false;
}
// ajax call ...
}
}
});
eventz.implement(new Options);
window.addEvent('domready', function(){
c = new eventz();
});
</script>
</head>
<body>
<fieldset class="types">
<input type="checkbox" class="trig" name="otypes[]" value="0" id="typ-0" checked="checked">All
<input id="typ-14" value="14" name="otypes[]" type="checkbox" class="otypes trig">Type A
<input id="typ-17" value="17" name="otypes[]" type="checkbox" class="otypes trig">Type B
</fieldset>
</body>
</html>
基本上在MooTools 1.4.4+中，更改事件已在IE中“标准化”：
它跟踪初始提交和修复。
关于您的代码，需要进行一些更改：
new Event(e).stop();必须重写为：e.stop();implements方法现在是一个更改键：Implements整个事情可以简化很多。这是一个示例重构，已针对性能进行了一些优化，并且逻辑更加清晰。
类似：
var eventz = new Class({
options: {
},
Implements: [Options],
initialize: function(options) {
this.setOptions(options);
this.setup();
this.jx = 0;
},
setup: function() {
this.makeEvents();
// ...
},
makeEvents: function() {
var finputs = $$('.trig');
finputs.removeEvents('change');
finputs.removeEvents('click');
var self = this;
this.type0 = $('typ-0');
this.otypes = $$('.otypes');
this.pause = false; // stop flag because of IE
finputs.each(function(r) {
r.addEvents({
click: function(e) {
this.pause || self.refresh(r); // this needs to stay as refresh calls some ajax stuff
}
});
});
// ...
},
// refresh is called from various methods
refresh: function(el) {
this.pause = true;
if (el !== this.type0) {
// count types checkboxes
this.type0.set('checked', !this.otypes.some(function(other) {
return !!other.get("checked");
}));
// ajax call ...
}
else {
this.otypes.set('checked', false);
}
this.pause = false;
}
});
现在，鉴于您拥有的代码，更改.checked时，它将触发propertychange，这将尝试使事件冒泡。
我建议通过checked和.set方法更改对.get的所有访问权限，例如。el.set('checked', true);/ el.get('checked')-同样用于ID或其他任何属性。
希望这足以使您走上正确的道路，如果您要使用最小的DOM在jsfiddle中构建此示例，我很乐意再次进行研究。
我在这里没有IE（mac），但我怀疑单击非全部复选框可能会中断，因为它将触发。
我建议移至点击事件，尽管这会使标签无效：http://jsfiddle.net/M2dFy/4/