Javascript Mootools事件导致IE7/IE8中的无限循环_Javascript_Internet Explorer_Mootools_Mootools Events

Javascript Mootools事件导致IE7/IE8中的无限循环

javascript internet-explorer

Javascript Mootools事件导致IE7/IE8中的无限循环,javascript,internet-explorer,mootools,mootools-events,Javascript,Internet Explorer,Mootools,Mootools Events,我很难在IE7（和IE8）中实现这一点。这是一个复杂得多的脚本中非常精简的部分。因此，请记住，方法和结构不会有太大的变化在IE7中，当选择其中一种类型时，我会得到一个无限循环。在FF、Chrome和IE9中工作正常。它与IE7/IE8中的mootools 1.1库一起工作也很好，但自从我将其转换为mootools 1.4后，我遇到了循环问题可能是框架中的某种事件授权更改。我真的不知道。非常感谢您的帮助 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML

我很难在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>


eventz
var eventz=新类({
选项：{
},  
初始化：函数（选项）{
此选项。设置选项（选项）；
这个.setup（）；
这是0.jx=0；
},
设置：函数（）{
这是makeEvents（）；
// ...
},
makeEvents:function（）{
警报（“初始”）；
var finput=$$（'.trig'）；
finputs.removeEvents（“更改”）；
finputs.removeEvents（'click'）；
finputs.each（函数（r）{
$（r）.增编({
“更改”：函数（e）{
//e、 预防默认值（）；
警报（r.name）；
新事件（e.stop（）；
this.refresh（r）；//这需要保持，因为refresh调用了一些ajax东西
}.绑定（此）
});     
}.约束（这个）；
// ...
},
//从各种方法调用refresh
刷新：函数（el）{
如果（el）{
//计数类型复选框
var ob_checked=0；
$$（'.otypes'）。每个（函数（r）{
//如果单击“全部”，则取消选中“全部”
如果（el.id=='typ-0'）{
r、 选中=错误；
}
r、 选中==真？ob_选中++：0；
})
//如果未选中，请选中“全部”
如果（ob_checked==0）{
$（'typ-0'）。选中=真；
}
//如果选择了某些选项，请取消选中“全部”
如果（el.id！=“类型-0”&&ob_选中！=0）{
$（'typ-0'）。选中=false；
}
//ajax调用。。。
}
}
});
实施（新选项）；
addEvent（'domready'，function（）{
c=新事件z（）；
});
全部的
A型
B型

基本上，在MooTools 1.4.4+中，变更事件已在IE中“规范化”：

请参阅此代码：
本期：

它跟踪初始提交和修复

关于您的代码，需要进行一些更改：

新事件（e.stop（）必须重写为：e.stop（）


implements
方法现在是一个mutator键：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或任何其他属性的类似用法
希望这足以让您走上正确的道路，如果您想用最小的DOM在JSFIDLE中构建一个这样的示例，我很乐意再看一次
我这里没有IE（mac），但我怀疑它可能会在点击非全部复选框时中断，因为这会触发
我建议移动到单击事件，尽管这会使标签无效：
谢谢您的回答！我以后会开始做的。使用set和get访问器不会触发事件气泡？我稍后会检查，谢谢。整个代码也使用输入框和选择框。所以我不得不使用两个事件（单击和更改）来让它工作。hrm更改会很烦人。您可以检查函数中的event.type，并解决它可能也是propertychange这一事实。在普通浏览器vs ie7/8中检查这一点--我正要将其发布到mootools问题上，但由于ibolmo不在，不确定它何时会被查看。在跟踪器上添加了一个bug--尽管我想不出区分真实事件和伪冒泡事件的方法，ie和ff中的事件对象在更改方面是相同的：（到目前为止，感谢您。我现在用文本字段和观察者扩展了示例。您还可以看到事件以及我为使其工作所做的操作。在JSFIDLE中不工作，所以您可以这样做：。如果这是正确的方法，则不使用舒尔。。。