jQuery - can I make a click event greedy?

josephdaviskcrm used Ask the Experts™
in jQuery, if I have one element inside of another one and assign them both a click event,  When I click on the inner element, it will fire off the click event for both elements because in reality I'm actually clicking on the outer element as well.  Is there a way to make a click event... as they say... greedy?  As in, if I make the inner click event greedy, when I click on it the outer element will not receive a click also?

Please let me know if this question is unclear.
Watch Question

Do more with

Expert Office
EXPERT OFFICE® is a registered trademark of EXPERTS EXCHANGE®
Top Expert 2014

Could you post the outer element and its inner element (your current html) ?


Try this for instance...
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
  <head runat="server">
    <title>Click Test</title>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" type="text/javascript"></script>
    <script type="text/javascript">
      $(function () {

        $('#outerDiv').click(function () {

        $('#innerDiv').click(function () {

    <form id="form1" runat="server">

      <div id="outerDiv" style="height:200px; width:200px; padding:100px; background-color:Red;">
        <div id="innerDiv" style="height:100px; width:100px; background-color:Green;">


Open in new window

Here is the answer to my own question...


Thanks for your interest anyway. :-)

Do more with

Expert Office
Submit tech questions to Ask the Experts™ at any time to receive solutions, advice, and new ideas from leading industry professionals.

Start 7-Day Free Trial