Mootools event causes infinite loop in IE7/IE8

Question

I have difficulties getting this to work in IE7 (and IE8). Its a VERY reduced part of a much more complex script. So bear in mind that the methods and the structure cannot change too much.

In IE7 I get a infinite Loop when selecting one of the Types. In FF, Chrome and IE9 it works fine. It worked with mootools 1.1 Library in IE7/IE8 great too, but since I converted it to Mootools 1.4 i got that loop problem.

Maybe some kind of event delegation change in the framework. I really don't know. Any help is greatly appreciated!

<!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>

score 3 · Accepted Answer · edited May 02 '12 at 17:27

Basically in MooTools 1.4.4+, change events have been 'normalized' in IE:

see this code: https://github.com/mootools/mootools-core/blob/master/Source/Element/Element.Event.js#L170-183
and this issue: https://github.com/mootools/mootools-core/issues/2170

which traces initial commits and the fixes.

With regards to your code, some changes need to take place:

new Event(e).stop(); must be rewritten to: e.stop();
implements method is now a mutator key: Implements

The whole thing can be simplified a lot. Here's a sample refactor, optimized for performance somewhat and with clearer logic.

http://jsfiddle.net/M2dFy/5/

something like:

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;
    }
});

now, in view of the code you had, when you change .checked, it will trigger propertychange which will try to make the event bubble.

I would recommend changing all access to checked via the .set and .get methods, eg. el.set('checked', true); / el.get('checked') - similar use for id or any other property too.

Hopefully this is enough to set you on the right path, if you were to build an example of this in jsfiddle with a minimum DOM that works, I will be happy to look it over once more.

I have no IE here (mac) but I suspect it may break on clicking on a non-all checkbox as this will fire.

I would recommend moving to click events, though this will invalidate labels: http://jsfiddle.net/M2dFy/4/

Thanks for your answer! I will start working on it later. using the set and get accessors doesnt fire the event bubble? — Mike, Apr 17 '12 at 09:12
I will check that later, thanks. The whole code uses input boxes and selectboxes too. So i had to use both events (click and change) to get it working. — Mike, Apr 17 '12 at 09:26
hrm the change will be annoying. you can check event.type in the function and work around the fact it may be a propertychange as well. check this in a normal browser vs ie7/8 - http://jsfiddle.net/8VMQs/1/ - i am about to post this to the mootools issues but with ibolmo being away, not sure when it will get looked at. — Dimitar Christoff, Apr 17 '12 at 09:33
added a bug on the tracker - https://github.com/mootools/mootools-core/issues/2352 - though I can't think of a way of differentiating between the real event and the pseudo bubbled event, the event objects are identical in ie and ff for the change :( — Dimitar Christoff, Apr 17 '12 at 09:43
Thanks so far. I extended the example now with the text field and the observer for it. You can also see both events and what i have done to get it working. Aint working in jsfiddle so here you go: http://pastebin.com/NKSdVEF6. Not shure if this is the right way to do it... — Mike, Apr 17 '12 at 11:57

Mootools event causes infinite loop in IE7/IE8

1 Answers1