Work with event.stopPropagation() on firefox and IE

Question

Why doesn't this code work for Firefox and IE? It's fine on chrome.

$(document).click(function(e) {
    if ($(".contentIconDesk").hasClass('markIconDesk')) {           
        $(".contentIconDesk").removeClass('markIconDesk');          
        wndSelected = "";   
    }       
});

function markMe(icon, wnd) {
    event.stopPropagation();            
    if ($('#'+icon).hasClass('markIconDesk')) {
        $(".contentIconDesk").removeClass('markIconDesk');
        wndSelected = "";               
    } else {
        $(".contentIconDesk").removeClass('markIconDesk');
        $('#'+icon).addClass('markIconDesk');
        wndSelected = wnd;                  
    }       
};

The function MarkMe(); is called in the event onClick() of some div in my HTML. The problem is with the event.stopPropagation(). When I click to add the class, the browser catch the click on $(document).

If there is a good suggestion instead of using the code above, it will be great.

Answer 1

You can try this. For the div in your HTML, modify it like this:

<div id="something1" onclick="markMe('icon1', 'wnd1', event)">
<div id="something2" onclick="markMe('icon2', 'wnd2', event)">
<div id="something3" onclick="markMe('icon3', 'wnd3', event)">

And in your js use it like:

function markMe(icon, wnd, e) {

    if (!e) var e = window.event;
    e.stopPropagation();

    $(".contentIconDesk").removeClass('markIconDesk');
    if ($('#' + icon).hasClass('markIconDesk')) {
        wndSelected = "";
    } else {
        $('#' + icon).addClass('markIconDesk');
        wndSelected = wnd;
    }
};

Answer 2

IE don't support stopPropagation method in it's DOM. You may use event.cancelBubble = true (I mean, cancelBubble property of the event object) instead. Have a look on this

Answer 3

Because event is undefined in this piece of code:

event.stopPropagation();

Answer 4

You'll need to pass event as parameter of your MarkMe function

function markMe(icon, wnd, event) {
   event.stopPropagation(); 
   //...
}

Then when you call it, it should look like this :

$('#myDiv').click(function(e) {
    //...
    MarkMe(icon, wnd, e);
});