我很难让它在 IE7(和 IE8)中工作。 它是一个更加复杂的脚本的一个非常精简的部分。因此请记住，方法和结构不能改变太多。
在 IE7 中，选择其中一种类型时出现无限循环。在 FF、Chrome 和 IE9 中运行良好。它与 IE7/IE8 中的 mootools 1.1 库一起工作也很棒，但自从我将其转换为 Mootools 1.4 后，我遇到了循环问题。
也许框架中某种事件委托(delegate)发生了变化。我真的不知道。 非常感谢任何帮助!
<!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 中“标准化”:
- 查看此代码:https://github.com/mootools/mootools-core/blob/master/Source/Element/Element.Event.js#L170-183
- 以及此问题:https://github.com/mootools/mootools-core/issues/2170
跟踪初始提交和修复。
关于您的代码，需要进行一些更改:
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，这将尝试使事件冒泡。
我建议通过 .set 和 .get 方法更改对 checked 的所有访问，例如。 el.set('checked', true);/el.get('checked') - id 或任何其他属性也有类似用途。
希望这足以让您走上正确的道路，如果您要在 jsfiddle 中构建一个具有最小 DOM 的示例，我将很乐意再次查看它。
我这里没有 IE (mac)，但我怀疑它可能会在单击非全部复选框时中断，因为这会触发。
我建议转向点击事件，尽管这会使标签无效: http://jsfiddle.net/M2dFy/4/
关于javascript - Mootools 事件导致 IE7/IE8 无限循环，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/10182381/