Search code examples
javascriptstoppropagation

event.stopPropagation Firefox

I have a JavaScript function that needs to stop bubbling. The code as I have it looks like this.

function clickedOrderSample(element, product, color, entry_id) {
    var cname ; 
    cname = element.className ;
    event.stopPropagation ? event.stopPropagation() : (event.cancelBubble=true) ;
    if (cname == 'orderSample' ) {
        window.location="index.php?/shop/add_to_cart/" + entry_id + "/" + color ;
    } else {
        window.location="index.php?/shop/products/" + product + "/" + color ;
    }
}

This is not working in FireFox 39.0. The problem is with the line.

event.stopPropagation ? event.stopPropagation() : (event.cancelBubble=true) ;

Is there a different way to write this so it will work with all browsers?

Solution

  • It's because your handler doesn't define an event parameter, which is available as a global in Chrome and IE but not Firefox.

    Change your handler to add event to the beginning of the formal parameters list.

    I assume the rest of the parameters are bound with .bind() or are passed via closure. If .bind() was used, then you'd actually need to add it as the last parameter.

    If you're using a closure, then probably the actual bound handler needs to define the event parameter and pass it along.