mouseenter vs mouseout test

test if mouseenter fires on parent element

by Laurens Maneschijn

HTML

<div id="p1" class="parent">
  <div id="c1" class="child">
    x
  </div>
</div>

<div id="p2" class="parent" style="padding:10px;">
  <div id="c2" class="child" style="margin:10px;">
    x
  </div>
</div>

<div id="p3" class="parent" style="padding:10px;">
  <div id="c3" class="child" style="position:relative;left:30px;top:30px;">
    x
  </div>
</div>


<hr>

<button id="clear">clear</button>
<label><input type="checkbox" id="cb_target"        checked > target        </label>
<label><input type="checkbox" id="cb_currenttarget" checked > currenttarget </label>
<label><input type="checkbox" id="cb_mouseover"     checked > mouseover     </label>
<label><input type="checkbox" id="cb_mouseout"      checked > mouseout      </label>
<label><input type="checkbox" id="cb_mouseenter"    checked > mouseenter    </label>
<label><input type="checkbox" id="cb_mouseleave"    checked > mouseleave    </label>

<textarea id="ta"></textarea>

CSS

div{
  display: inline-block;
}
.parent{
  background-color: #f00;
  margin:20px;
}
.child{
  background-color: #0f0;
  padding:10px;
}
textarea {
  box-sizing: border-box;
  width: 100%;
  height: 500px;
}

JavaScript

$(document.body).on('mouseenter mouseleave mouseover mouseout', 'div', function(e){
	if ( $('#cb_' + e.type).is(':checked') ) {
  	if ( $('#cb_target').is(':checked') ) {
	  	log('       target.id:' + e.target.id + ' type:' + e.type);
		}
  	if ( $('#cb_currenttarget').is(':checked') ) {
      log('currentTarget.id:' + e.currentTarget.id + ' type:' + e.type);
    }
  }
});

$(document.body).on('click', '#clear', function(e){
  $('#ta').val('');
});

function log(s){
	s = (new Date()).toISOString() + ' ' + s;
	console.log(s);
  $('#ta').val(s + '\n' + $('#ta').val() );
}