asked on

jQuery - can I make a click event greedy?

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.

leakim971

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

josephdaviskcrm

ASKER

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 () {
          $('#outerDiv').fadeOut(1000);
        });

        $('#innerDiv').click(function () {
          $('#innerDiv').fadeOut(1000);
        });

      });
    </script>
  </head>
  <body>
    <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;">
        </div>
      </div>

    </form>
  </body>
</html>

Open in new window

ASKER CERTIFIED SOLUTION

josephdaviskcrm

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial