2CLICKS

2CLICKS

by firegroove

HTML

<script src="https://code.jquery.com/jquery-1.10.2.js"></script>
<div id="ThePanel">
  <p>
    -------------- in -----------------------
    <br>
  </p>
  <div id="zoomToolbar" style="border:1px solid #000">


    <input type="button" class="button" id="zoom" value="ZOOM 1" />
    <input type="button" class="button" id="zoom" value="ZOOM 2" />
  </div>
  <p>
    This is INSIDE the Panel,  clic it to change blue to yellow
  </p>
  ------------------ in---------------------
  <br>
</div>

<div id="Outside">
  <p>
    -------------- out ------------------------
    <br>
  </p>
  <input type="button" class="Text2" value="TEST B" />
  <p>
    This is OUTSIDE the Panel
  </p>
  ---------------- out ----------------------
  <br>

</div>

<div id='foo'>
  <div id='bar' class="bar">
  </div>
</div>

CSS

#foo {
  width: 100px;
  height: 100px;
  background-color: yellow;
}

#bar {
  width: 100px;
  height: 100px;
  background-color: blue;
}

JavaScript

$("#ThePanel").not(document.getElementById("zoom")).on('dblclick', function() {
  <!--  alert("INSIDE THE PANEL"); -->
});

$("#Outside").on('dblclick', function() {
  <!--  alert("OUTSIDE"); --> 
});
////////////////////////////////////////////////////
<!-- 
$(document).ready(function() {
    $('#foo').dblclick(function(e) {
      if (!$(e.target).hasClass("bar")) {
        $('#foo').find('#bar').toggle('fast');
      }
    });
  })
  --> /////////////////////////////////////////////////

$(document).ready(function() {
  $('#ThePanel').click(function(e) {
    if (!$(e.target).is('.button')) {
      $('#foo').find('#bar').toggle('fast');
<!--       alert("BG click");
       -->   
       }
  });
})