jQuery HTML Element How to - Click inside div and outside a div

Question

We would like to know how to click inside div and outside a div.

Answer


<!DOCTYPE html>
<html>
<head>
<script type='text/javascript'
  src='http://code.jquery.com/jquery-1.8.3.js'></script>
<script type="text/javascript"
  src="http://code.jquery.com/ui/1.9.2/jquery-ui.js"></script>
</head><!--from w w  w  .ja v a2s .c  om-->
<body>
  <script>
    $(document).ready(function() {
        $("#outside").click(function() {
            console.log("outside click");
        });
        $(".inside").click(function() {  
            console.log("inside click");
            return false;
        });
    });
</script>
  <ul>
    <li id="outside" style="border: 2px solid red; padding: 20px;">
      <div class="inside" style="border: 2px solid blue;">Click This
        Div. I want to accept the inside click but not the outside click.</div>
    </li>
  </ul>
</body>
</html>

The code above is rendered as follows: