stoppropagation

I have a vertically-scrolling div within a page that also scrolls vertically. When the child div is scrolled with the mouse wheel and reaches the top or bottom of the scroll bar, the page (body) begins to scroll. While the mouse is over the child div, I'd like the page (body) scroll to be locked. This SO post (scroll down to the selected answer) demonstrates the problem well. This SO question is essentially the same as mine, but the selected answer causes my page contents to noticeably shift horizontally as the scrollbar disappears and reappears. I thought there might be a solution that

This question already has an answer here: What's the difference between event.stopPropagation and event.preventDefault? 7 answers Can someone explain what's the difference between event.preventDefault() and event.stopPropagation() ? I have a table and within that table I have an img tag. When I click the img tag, I want to see a popup. But I also want to stop the selection of multiple rows, so I use: $("table.items tbody tr").click(function(event) { event.stopPropagation(); }); When I use the js code, the popup does not appear; If I delete the js code, the popup works. $(".info").live("click"

I can't seem to get this to stop propagating.. $(document).ready(function(){ $("body").on("click","img.theater",function(event){ event.stopPropagation(); $('.theater-wrapper').show(); }); // This shouldn't fire if I click inside of the div that's inside of the // `.theater-wrapper`, which is called `.theater-container`, anything else it should. $(".theater-wrapper").click(function(event){ $('.theater-wrapper').hide(); }); }); Refer this jsfiddle Since you are using on on the body element and not directly on img.theater the event is going to bubble up to body element and that is how it works.