preventing execution event of containing element when click on child element

Question

all my elements are absolutely positioned
item2 is contained in item1
when I click on item2, the default behavior is to execute click of item2 and then click of item1
can I somehow prevent any action that was to be performed on item1 when I click on item2??

Please click on item2 in fiddle

My fiddle:

HTML

<div class="item1">
  item1
</div>
<div class="item2">
    item2
</div>
<div class="item3">
    item3
</div>

CSS:

item1 {
    position:absolute;
    width:150px;
    height:150px;
    background-color:red;
    top:5%;
}

.item3, .item2 {
    position:absolute;
    width:50px;
    height:50px;
    background-color:green;
    top:8%;
    left:1%;
    display:none;
}

.item3 {
    top:18%;
}

JS:

var item1 = $(".item1");
var item2 = $(".item2");
var item3 = $(".item3");

item1.hover(
    function() {
      item2.show();
      item3.show();
    },
    function() {
      item2.hide();
      item3.hide();
    }

);

item2.hover(
    function() {
      item3.hide();
    },
    function() {
    }

);

item2.click(
    function() {
        alert("Perform some function");
    }
);

item1.click(
    function() {
        alert("Perform item1 function");
    }
);

which one is preferren e.stop() or return false??? thanks a lot — gaurav jain, Feb 22 '13 at 02:08
return false seems to do what I want ...e.stopPropagatio() did not...let me test more — gaurav jain, Feb 22 '13 at 02:11
it's e.stopPropagation() with an "n" at the end (and you have to pass "e" to the event function as an argument). e.stopPropagation stops the propagation of the events to the containing elements. return false apart from also doing that, also prevents default browser behaviours such as being taken to another page when you click a link (""). — João Paulo Macedo, Feb 22 '13 at 02:16
if you dont want to stop the propagation of the event but want to stop default browser behaviours, then there's e.preventDefault(). — João Paulo Macedo, Feb 22 '13 at 02:17
so, basically: return false does the same as e.stopPropagation and e.preventDefault combined (it even might do more) — João Paulo Macedo, Feb 22 '13 at 02:18

score 1 · Accepted Answer · edited May 23 '17 at 12:27

1

Simply return false:

item2.click(
    function() {
        alert("Perform some function");
        return false;
    }
);

item1.click(
    function() {
        alert("Perform item1 function");
        return false;
    }
);

Read this: What does "return false;" do?

edited May 23 '17 at 12:27

Community

1
1

answered Feb 22 '13 at 02:03

gdoron

147,333
58
291
367

score 1 · Answer 2 · answered Feb 22 '13 at 02:12

you can prevents the event from bubbling up the DOM tree, preventing any parent handlers from being notified of the event.

DOM Level 3 Events: stopPropagation

IE6-8 you can add return false in event handler or window.event.cancelBubble = true

if you use jquery, can use event.stopPropagation in all browser

preventing execution event of containing element when click on child element

2 Answers2