Question

I have this code working on Safari and Chrome , but not in Firefox . Is firefox having a problem with StopPropagation() ?

$(function() {
    // Setup drop down menu
    $('.dropdown-toggle').dropdown();

    // Fix input element click problem
    $('.login-menu form').click(function(e) {
        alert(e.isPropagationStopped());
        e.stopPropagation();
        alert(e.isPropagationStopped());
    });
});​

Answer 1

I don’t know how your HTML looks but stopPropagation works fine in FireFox.

I think your expectations might be incorrect in what it does.

According to the documentation of stopPropagation()

event.stopPropagation()
Prevents the event from bubbling up the DOM
tree, preventing any parent handlers from being notified of the event.

Assuming HTML like this for example:

<div id="parent">
    <div class="login-menu">click anywhere</div>
</div>

This code works fine, the click event is not bubbling up:

$(function() {
    // Fix input element click problem
    $('.login-menu').click(function(e) {
        alert(e.isPropagationStopped());
        e.stopPropagation();
        alert(e.isPropagationStopped());
    });

    $("#parent").click(function(e){
        alert("parent received click");
    });
});​

DEMO – Works in FF – Does not bubble up event

Comment out the line e.stopPropagation(); in the DEMO and as expected the event is bubbled up, showing the alert from the parent.

What is your expected behaviour?

You have not specified what it is you expect to happen.

If for example you expected the default action of the event no to be triggered you can use preventDefault()

event.preventDefault()
If this method is called, the default action of the event will not be triggered.

If you want to cover both, prevent the default action and prevent the event from bubbling up you either call both or simply use return false at the end of your method.

If you could elaborate what it is you are trying to achieve we can be more specific in suggestion a solution which works for you.