IE/Firefox bubble event

Question

Most likely this question has been asked many times before, but as far as I could see, the same responses are given and they do not work for me.

The problem is the following: I have a button control that is rendered as a table and inside this table I have a smaller button. The requirement is that clicking the outer button should show one message and clicking on the small inner button should show another message. I have the code inside this fiddle: http://jsfiddle.net/DZFEZ/3/

$('#mine').click(function (evt) {
    alert("big button click");
});

$('#mine-fav').click(function (evt) {
    alert("small button click");
    var event = evt || window.event; // cross-browser event    
    if (event) {
        event.returnValue = false;
        event.cancelBubble = true;
        event.stopPropagation();
        event.preventDefault();
    }
});

This code works ok on Chrome (and I suspect Opera/Safari. did not check as I cannot install those browsers), but on IE9+ and Fireforx it does not. The event is just triggered on the big outer button, no matter if I click on the small one.

Anybody has any clue why? Thanks, Marius.

Answer 1

To resolve your problem just replace outer button to div.

Because i think that the button in atomic at those browser and there are some difference in browsers implementation. You should use elements as expected. Working demo