Weird Javascript error in IE

Question

Getting a weird error for .stopPropagation() in IE

My code is as follows:

$(document).ready(function(){
    var options = {
    $this: "",
    $menuItems: $(".mainMenu > li"),
    $blueBar: $(".blueBar"),
    $submenuBg: $("#submenuBg"),
    $sortOptions: $(".sortOptions"),
    $submenu: $(".submenu"),
    submenuClass: ".submenu",
    blueBarClass: ".blueBar",
    selectedClass: "selected",
    sortOptionsClass: ".sortOptions",
    subSubmenu: "ul",
    subSubmenuClass: "sub-submenu"      
    };

    $sortBy.toggle(function(){
            options.$this = $(this);
            ddlShow(event, options);
        }, 
        function(){
            options.$this = $(this);
            ddlHide(options);
        }
    );

});

var ddlShow = function(event, options){
    event.stopPropagation();
    options.$this.children(options.sortOptionsClass).show();    
}

var ddlHide = function(options){
options.$this.children(options.sortOptionsClass).hide();
}

Getting the following error:

object doesn't support property or method 'stoppropagation'

Code works fine in Chrome and Firefox.

How do I solve this?

Note: The same code works fine without the object options.

Answer 1

in IE we do not have stopPropogation method available in javascript on event object. If you will search in google you will find different implementation of event object in ie and webkit based browsers. So in order to correct that jQuery has given a single interface for handling it so you should use jQuery way of doing events to stop getting this errors.

You can read this article to get more clarification http://www.quirksmode.org/js/introevents.html

Answer 2

replace e.stopPropagation(); with if (e.stopPropagation) e.stopPropagation(); else e.cancelBubble = true; worked for me

Thanks

Answer 3

Have your toggle handlers accept the event parameter from jQuery:

$sortBy.toggle(function(event){ // ADDED PARAMETER
        options.$this = $(this);
        ddlShow(event, options);
    }, 

If you do not do this, then when calling ddlShow the argument event resolves to window.event, which is an object that has not been "normalized" by jQuery for cross-browser consistency.

Answer 4

Here:

$sortBy.toggle(function(){  <-- you must get the event object from jquery.
        options.$this = $(this);
        ddlShow(event, options);
    }, 
    function(){
        options.$this = $(this);
        ddlHide(options);
    }
);

Then:

$sortBy.toggle(function(event){ ... ddlShow(event, options); }...