javascript - Stopping propagation of mousedownmouseup from a click handler - Stack Overflow

admin管理员组

文章数量:1191335

Here's a DEMO.

I have two divs, an inner and an outer:

<div id="outer">
    <div id="inner"></div>
</div>

With some CSS so you can see which is which:

#outer {
    width: 250px;
    height: 250px;
    padding: 50px;
    background: yellow;
}

#inner {
    width: 250px;
    height: 250px;
    background: blue;
}

I try to stop propagation of mousedown and mouseup events from within a click handler like so:

$('#inner').on('click', function(e) {
    e.stopPropagation();
    $(this).css({'background': 'green'});
    return false;
});

$('#outer').on('mousedown', function(e) {
    $(this).css({'background': 'green'});
});

$('#outer').on('mouseup', function(e) {
    $(this).css({'background': 'yellow'});
});

This doesn't seem possible. What does work is calling .stopPropagation from within other mousedown and mouseup calls, as shown here (another DEMO):

$('#inner').on('mousedown', function(e) {
    e.stopPropagation();
    return false;
});

$('#inner').on('mouseup', function(e) {
    e.stopPropagation();
    return false;
});

I may have already answered my own question, but I'm not sure if my approach is the best or most reasonable. Is this the right way to stop an event bubbling up to a mousedown and mouseup?

Here's a DEMO.

I have two divs, an inner and an outer:

<div id="outer">
    <div id="inner"></div>
</div>

With some CSS so you can see which is which:

#outer {
    width: 250px;
    height: 250px;
    padding: 50px;
    background: yellow;
}

#inner {
    width: 250px;
    height: 250px;
    background: blue;
}

I try to stop propagation of mousedown and mouseup events from within a click handler like so:

$('#inner').on('click', function(e) {
    e.stopPropagation();
    $(this).css({'background': 'green'});
    return false;
});

$('#outer').on('mousedown', function(e) {
    $(this).css({'background': 'green'});
});

$('#outer').on('mouseup', function(e) {
    $(this).css({'background': 'yellow'});
});

This doesn't seem possible. What does work is calling .stopPropagation from within other mousedown and mouseup calls, as shown here (another DEMO):

$('#inner').on('mousedown', function(e) {
    e.stopPropagation();
    return false;
});

$('#inner').on('mouseup', function(e) {
    e.stopPropagation();
    return false;
});

I may have already answered my own question, but I'm not sure if my approach is the best or most reasonable. Is this the right way to stop an event bubbling up to a mousedown and mouseup?

• javascript
• jquery
• mouseevent

Share Improve this question Follow asked Jan 16, 2012 at 1:59 Josh SmithJosh Smith 15k1919 gold badges7373 silver badges125125 bronze badges

Add a comment  | 

1 Answer 1

Sorted by: Reset to default 23

Yes. Since mouseclick and mousedown/mouseup are different events, you can't get at one from the other at all - you have to do it from within your own mousedown/mouseup handlers. What you can do is refactor that into a generic method to use in both places:

stopPropagation('#inner', 'mousedown');
stopPropagation('#inner', 'mouseup');

function stopPropagation(id, event) {
    $(id).on(event, function(e) {
        e.stopPropagation();
        return false;
    });
}

本文标签： javascriptStopping propagation of mousedownmouseup from a click handlerStack Overflow