Prevent default behaviour jQuery

[jimleeder123]

I've got some jQuery code that makes items disappear when you click the body as shown below which works.

$(document).ready(function(){ 
     $("body").click(function(){
		 $(".weblink").css("background-color", "transparent");
		 $(".webdropdown").css("display", "none");
     });
});

So when you click a button, I want the items (.weblink and .webdropdown) to NOT disappear. I need them to either appear, or stay on the screen if they are already on (unlikely but could happen). I imagine a prevent default behaviour thing on the body would work, but what I've got doesn't work. My code for this is below.

$(document).ready(function(){ //click the button
     $(".weblink").click(function(){
		 event.preventDefault("body");
		 $(".webdropdown").css("display", "inline-table");
		 $(".weblink").css("background-color", "#E7CF4F");
     });
});

Any help will be gratefully accepted.

[requinix]

What you need is stopPropagation. It prevents an event from being "bubbled" up to be handled by parent elements.

 

Put a handler on both the body and the weblink/webdropdown elements, have body's work the way it does now, and have the others' merely call stopPropagation on the event object.

[jimleeder123]

Thanks, that worked. Been a while since I did jQuery, I remember stopPropagation now.

[scootstah]

Just an FYI, that is not limited to jQuery - that is part of Javascript itself. https://developer.mozilla.org/en-US/docs/Web/API/Event/stopPropagation