javascript - jQuery overlapping div wont nullify the hidden onclick of div -
jquery('#warning').click(function() { console.log('clicked @ warning'); }); jquery('#content').click(function() { console.log('clicked @ content'); }); <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div id="warning"> <div id="content">this content</div> dsfdfsdsfdsfdsfdsfdsfdsf </div> fiddle: https://jsfiddle.net/73jykhj0/
unfortunatly clicking @ content triggers clicking @ warning too. how eliminate clicking @ warning?
prevent event bubbling using event.stoppropagation()
jquery('#warning').click(function() { console.log('clicked @ warning'); }); jquery('#content').click(function(event) { event.stoppropagation() console.log('clicked @ content'); }); <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div id="warning"> <div id="content">this content</div> dsfdfsdsfdsfdsfdsfdsfdsf </div> or, can check target of event using event.target needful.
jquery('#warning').click(function(event) { if ($(event.target).is('#content')) { return; } console.log('clicked @ warning'); }); jquery('#content').click(function() { console.log('clicked @ content'); }); <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div id="warning"> <div id="content">this content</div> dsfdfsdsfdsfdsfdsfdsfdsf </div>
Comments
Post a Comment