Jquery StopPropagation not working in firefox

问题

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());
    });
});

回答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.

回答2:

I run into the same problem, and fixed it as soon as I realized I made a couple of "distraction errors", might be helpful to some:

1) Remember the "event" argument: The function which gets executed when the event is triggered (i.e. the function passed as argument to $('.login-menu form').click() ) should accept an argument which represents the event (by convention called 'event', or 'e' in most tutorials). Chrome allows you to forget about it, while Firefox requires it.

2) Remember to clear Firefox's cache (CTRL + F5): If, like myself, you disable Chrome's cache for developing (tools -> Javascript Console -> options -> Disable cache (while DevTools is open) ), but don't do the same in Firefox (cause it's a little trickier to do, and I'm lazy), remember to reload your page using CTRL + F5

It now works like a charm, for me...

回答3:

This worked for me (across all browsers, whether or not an event can be passed), I am using google map markers, and was not able to pass an event to the method:

var stopPropagation = function (event) {
    if (event && event.stopPropagation) {
        event.stopPropagation();
    } 
    else if (window.event) {
        window.event.cancelBubble = true;
    }
    else if (window.$.Event.prototype) {
        window.$.Event.prototype.stopPropagation();
    }
}

回答4:

stopPropagation is used for stopping an event from triggering on parent elements.

See http://jsfiddle.net/Accus/2/ for an example on how it works.

HTML:

<body>
    <div>
        <span>Test</span>
    </div>
<body>

JS:

$('span').click(function(e) {
    console.log('span');
    console.log(e.isPropagationStopped());
});

$('div').click(function(e) {
    console.log('div');
    console.log(e.isPropagationStopped());
    e.stopPropagation();
    console.log(e.isPropagationStopped());
});

$('body').click(function(e) {
    console.log('body');
    console.log(e.isPropagationStopped());
});

来源：https://stackoverflow.com/questions/12556452/jquery-stoppropagation-not-working-in-firefox

标签

jquery

firefox

dom

twitter-bootstrap

stoppropagation