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.

It's not a problem with `stopPropagation()`, the browser is registering your click as being on the big button (because technically it is) — RevanProdigalKnight, Jul 16 '14 at 11:35
Ok, but then how can I fix this so that it works consistently through all the browsers? — marius, Jul 16 '14 at 12:09
After some hours of reading the documentation on the internet, I created an ever more basic example in JSFiddle to demonstrate the problem. It appears that IE/Firefox treats buttons and divs differently when clicks are concerned: — marius, Jul 16 '14 at 15:18

score 1 · Accepted Answer · answered Jul 17 '14 at 10:45

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

answered Jul 17 '14 at 10:45

Romick

163
1
1
11

Yes, in the end I used this solution because I realized that there is no way I could make the button+div solition work cross-platform. – marius Jul 18 '14 at 12:17

IE/Firefox bubble event

1 Answers1