javascript - Click close button on a div with triggering div click() - Stack Overflow

admin管理员组

文章数量:1332345

I've got a close button in a DIV, with both the DIV and the close button also having click() events attached to them. When I click the close button it also triggers the div click() event. I know I could put a SPAN inside the div and attach my click event to the span instead of the DIV, but is there a way I can keep both the div click event and the close button click event and not trigger the div click() when I click the close button?

<div id="sendFeedback" class="feedback with-round-borders with-padding with-box-shadows">Send us your feedback <span id="closeFeedback" class="ui-icon ui-icon-circle-close" style="float:right"></span></div>
<script>
$(document).ready(function() {
 $("#sendFeedback").click(function() {
   alert('test');
 });
$("#closeFeedback").click(function() {
 $("#sendFeedback").fadeOut();
})
});
</script>

/

I've got a close button in a DIV, with both the DIV and the close button also having click() events attached to them. When I click the close button it also triggers the div click() event. I know I could put a SPAN inside the div and attach my click event to the span instead of the DIV, but is there a way I can keep both the div click event and the close button click event and not trigger the div click() when I click the close button?

<div id="sendFeedback" class="feedback with-round-borders with-padding with-box-shadows">Send us your feedback <span id="closeFeedback" class="ui-icon ui-icon-circle-close" style="float:right"></span></div>
<script>
$(document).ready(function() {
 $("#sendFeedback").click(function() {
   alert('test');
 });
$("#closeFeedback").click(function() {
 $("#sendFeedback").fadeOut();
})
});
</script>

http://jsfiddle/t5VPN/1/

• javascript
• jquery
• jquery-ui

Share Improve this question Follow edited Dec 5, 2011 at 20:27 themerlinproject asked Dec 5, 2011 at 20:23 themerlinprojectthemerlinproject 3,58255 gold badges3939 silver badges5555 bronze badges 1

• It sounds like the click even is bubbling unexpectedly. if you use jquery's $(selector).bind() method to attach the event, you can stop bubbling by declaring a value of false for the function's third argument. (i.e: $(selector).bind('click', function(){}, false).) – Aaron Commented Dec 5, 2011 at 20:28

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 6

Add event.stopPropagation() to the <span> click event handler:

$(document).ready(function() {
    $("#sendFeedback").click(function() {
        alert('test');
    });
    $("#closeFeedback").click(function(event) {
        event.stopPropagation();
        $("#sendFeedback").fadeOut();
    })
});

.stopPropagation() will stop the event from bubbling up to the div (or any other ancestor): http://api.jquery./event.stopPropagation/

Here is your jsfiddle updated: http://jsfiddle/jasper/t5VPN/2/

Yep. You should cancel the bubbling of the event up in the DOM tree.

For futher info see the Event#stopPropagation() in the DOM Event documentation.

$('#closeFeedback').click(function(e){
     $('#sendFeedback').fadeOut();
     e.stopPropagation();
 });

本文标签： javascriptClick close button on a div with triggering div click()Stack Overflow