4c4
< <title>HTML Mouse Events - RJM Programming - May, 2019</title>
---
> <title>HTML onmouseout and onmouseleave and onmouseup and onmousedown Events - RJM Programming - May, 2019</title>
7,20d6
< <style>
<  .form { border: 1px solid cyan; }
<  .table { border: 1px solid red; }
<  .thead { border: 1px solid blue; }
<  .tbody { border: 1px solid lightblue; }
<  .tr { border: 1px solid yellow; }
<  .th { border: 1px solid orange; }
<  .td { border: 1px solid brown; }
<  .text { border: 1px solid green; }
<  .checkbox { border: 1px solid lightgreen; }
<  .submit { border: 1px solid magenta; }
<  .button { border: 1px solid purple; }
< </style>
< 
23,38d8
< 
< //onclick	script	Fires on a mouse click on the element
< //onmousedown	script	Fires when a mouse button is pressed down on an element
< //onmouseout	script	Fires when the mouse pointer moves out of an element
< //onmouseup	    script	Fires when a mouse button is released over an element
< 
< //ondblclick	script	Fires on a mouse double-click on the element
< //onmousemove	script	Fires when the mouse pointer is moving while it is over an element
< //onmouseover	script	Fires when the mouse pointer moves over an element
< //onwheel	script	Deprecated. Use the onwheel attribute instead onwheel
< 
<  var h4ihomdb='';
<  var h4ihommo='';
<  var h4ihomov='';
<  var h4ihomwh='';
< 
52,78d21
<    h4ihomdb='';
<    h4ihommo='';
<    h4ihomov='';
<    h4ihomwh='';
<  }
<  
<  
<  function oclkomdb(ois) {
<   var oistype='';
<   if (ois) {
<   if (('' + ois.id) != '') {
<    //setTimeout(btn, 1500);
<    if (('' + ois.type).toLowerCase().indexOf('undefined') != -1) {
<      oistype=ois.outerHTML.substring(1).split('>')[0].split(' ')[0];
<    } else {
<      oistype=ois.type;
<    }
<    if (h4ihomdb == '') {
<      h4ihomudb='You ondblclick a ' + colourcode(oistype) + ' (' + ois.id + ')';
<    } else if (h4ihomdb.indexOf('You ondblclick a ' + colourcode(oistype) + ' (' + ois.id + ')') != -1) {
<      h4ihomdb='You ondblclick a ' + colourcode(oistype) + ' (' + ois.id + ')';
<    } else {
<      h4ihomdb+=' -&gt; ' + 'You ondblclick a ' + colourcode(oistype) + ' (' + ois.id + ')';
<    }
<    document.getElementById('myh4omdb').innerHTML=h4ihomdb;
<   }
<   }
81,127d23
<  function oclkommo(ois) {
<   var oistype='';
<   if (ois) {
<   if (('' + ois.id) != '') {
<    //setTimeout(btn, 1500);
<    if (('' + ois.type).toLowerCase().indexOf('undefined') != -1) {
<      oistype=ois.outerHTML.substring(1).split('>')[0].split(' ')[0];
<    } else {
<      oistype=ois.type;
<    }
<    if (h4ihommo == '') {
<      h4ihomumo='You onmousemove a ' + colourcode(oistype) + ' (' + ois.id + ')';
<    } else if (h4ihommo.indexOf('You onmousemove a ' + colourcode(oistype) + ' (' + ois.id + ')') != -1) {
<      h4ihommo='You onmousemove a ' + colourcode(oistype) + ' (' + ois.id + ')';
<    } else {
<      h4ihommo+=' -&gt; ' + 'You onmousemove a ' + colourcode(oistype) + ' (' + ois.id + ')';
<    }
<    document.getElementById('myh4ommo').innerHTML=h4ihommo;
<   }
<   }
<  }
<  
<  function oclkomov(ois) {
<   var oistype='';
<   if (ois) {
<   if (('' + ois.id) != '') {
<    //setTimeout(btn, 1500);
<    if (('' + ois.type).toLowerCase().indexOf('undefined') != -1) {
<      oistype=ois.outerHTML.substring(1).split('>')[0].split(' ')[0];
<    } else {
<      oistype=ois.type;
<    }
<    if (oistype != 'span') {
<    if (h4ihomov == '') {
<      h4ihomov='You onmouseover a ' + colourcode(oistype) + ' (' + ois.id + ')';
<    //} else if (('' + (document.getElementById('myh4omov').innerText || document.getElementById('myh4omov').contentWindow || document.getElementById('myh4omov').contentDocument)).indexOf('You onmouseover a ' + oistype + ' (' + ois.id + ')') != -1) {
<    } else if (h4ihomov.length > 800) { //h4ihomov.indexOf('You onmouseover a ' + colourcode(oistype) + ' (' + ois.id + ')') != -1) {
<      h4ihomov='You onmouseover a ' + colourcode(oistype) + ' (' + ois.id + ')';
<    } else {
<      //alert(('' + (document.getElementById('myh4omov').innerText || document.getElementById('myh4omov').contentWindow || document.getElementById('myh4omov').contentDocument)) + ' ... versus ... ' + ('' + (document.getElementById('myh4omov').innerText || document.getElementById('myh4omov').contentWindow || document.getElementById('myh4omov').contentDocument)) + ' -&gt; ' + 'You onmouseover a ' + oistype + ' (' + ois.id + ')');
<      h4ihomov+=' -&gt; ' + 'You onmouseover a ' + colourcode(oistype) + ' (' + ois.id + ')';
<    }
<    document.getElementById('myh4omov').innerHTML=h4ihomov;
<    }
<   }
<   }
<  }
129,150d24
<  function oclkomwh(ois) {
<   var oistype='';
<   if (ois) {
<   if (('' + ois.id) != '') {
<    //setTimeout(btn, 1500);
<    if (('' + ois.type).toLowerCase().indexOf('undefined') != -1) {
<      oistype=ois.outerHTML.substring(1).split('>')[0].split(' ')[0];
<    } else {
<      oistype=ois.type;
<    }
<    if (h4ihomwh == '') {
<      h4ihomuwh='You onwheel a ' + colourcode(oistype) + ' (' + ois.id + ')';
<    } else if (h4ihomwh.indexOf('You onwheel a ' + colourcode(oistype) + ' (' + ois.id + ')') != -1) {
<      h4ihomwh='You onwheel a ' + colourcode(oistype) + ' (' + ois.id + ')';
<    } else {
<      h4ihomwh+=' -&gt; ' + 'You onwheel a ' + colourcode(oistype) + ' (' + ois.id + ')';
<    }
<    document.getElementById('myh4omwh').innerHTML=h4ihomwh;
<   }
<   }
<  }
<    
162,164c36,38
<      h4ihomu='You onmouseup a ' + colourcode(oistype) + ' (' + ois.id + ')';
<    } else if (h4ihomu.indexOf('You onmouseup a ' + colourcode(oistype) + ' (' + ois.id + ')') != -1) {
<      h4ihomu='You onmouseup a ' + colourcode(oistype) + ' (' + ois.id + ')';
---
>      h4ihomu='You onmouseup a ' + oistype + ' (' + ois.id + ')';
>    } else if (h4ihomu.indexOf('You onmouseup a ' + oistype + ' (' + ois.id + ')') != -1) {
>      h4ihomu='You onmouseup a ' + oistype + ' (' + ois.id + ')';
166c40
<      h4ihomu+=' -&gt; ' + 'You onmouseup a ' + colourcode(oistype) + ' (' + ois.id + ')';
---
>      h4ihomu+=' -&gt; ' + 'You onmouseup a ' + oistype + ' (' + ois.id + ')';
184,186c58,60
<      h4ihomd='You onmousedown a ' + colourcode(oistype) + ' (' + ois.id + ')';
<    } else if (h4ihomd.indexOf('You onmousedown a ' + colourcode(oistype) + ' (' + ois.id + ')') != -1) {
<      h4ihomd='You onmousedown a ' + colourcode(oistype) + ' (' + ois.id + ')';
---
>      h4ihomd='You onmousedown a ' + oistype + ' (' + ois.id + ')';
>    } else if (h4ihomd.indexOf('You onmousedown a ' + oistype + ' (' + ois.id + ')') != -1) {
>      h4ihomd='You onmousedown a ' + oistype + ' (' + ois.id + ')';
188c62
<      h4ihomd+=' -&gt; ' + 'You onmousdown a ' + colourcode(oistype) + ' (' + ois.id + ')';
---
>      h4ihomd+=' -&gt; ' + 'You onmousdown a ' + oistype + ' (' + ois.id + ')';
206,208c80,82
<      h4ihomo='You onmouseout a ' + colourcode(oistype) + ' (' + ois.id + ')';
<    } else if (nospan(h4ihomo).indexOf(nospan('You onmouseout a ' + colourcode(oistype) + ' (' + ois.id + ')')) != -1) {
<      h4ihomo='You onmouseout a ' + colourcode(oistype) + ' (' + ois.id + ')';
---
>      h4ihomo='You onmouseout a ' + oistype + ' (' + ois.id + ')';
>    } else if (h4ihomo.indexOf('You onmouseout a ' + oistype + ' (' + ois.id + ')') != -1) {
>      h4ihomo='You onmouseout a ' + oistype + ' (' + ois.id + ')';
210c84
<      h4ihomo+=' -&gt; ' + 'You onmouseout a ' + colourcode(oistype) + ' (' + ois.id + ')';
---
>      h4ihomo+=' -&gt; ' + 'You onmouseout a ' + oistype + ' (' + ois.id + ')';
228,230c102,104
<      h4ihoml='You onmouseleave a ' + colourcode(oistype) + ' (' + ois.id + ')';
<    } else if (h4ihoml.indexOf('You onmouseleave a ' + colourcode(oistype) + ' (' + ois.id + ')') != -1) {
<      h4ihoml='You onmousleave a ' + colourcode(oistype) + ' (' + ois.id + ')';
---
>      h4ihoml='You onmouseleave a ' + oistype + ' (' + ois.id + ')';
>    } else if (h4ihoml.indexOf('You onmouseleave a ' + oistype + ' (' + ois.id + ')') != -1) {
>      h4ihoml='You onmousleave a ' + oistype + ' (' + ois.id + ')';
232c106
<      h4ihoml+=' -&gt; ' + 'You onmouseleave a ' + colourcode(oistype) + ' (' + ois.id + ')';
---
>      h4ihoml+=' -&gt; ' + 'You onmouseleave a ' + oistype + ' (' + ois.id + ')';
250c124
<      h4ih='You clicked a ' + colourcode(oistype) + ' (' + ois.id + ')';
---
>      h4ih='You clicked a ' + oistype + ' (' + ois.id + ')';
252c126
<      h4ih+=' -&gt; ' + 'You clicked a ' + colourcode(oistype) + ' (' + ois.id + ')';
---
>      h4ih+=' -&gt; ' + 'You clicked a ' + oistype + ' (' + ois.id + ')';
266,272d139
<  function nospan(stuff) {
<  }
<  
<  function colourcode(inty) {
<    return '<span CLASS=' + inty + '>' + inty + '</span>'; 
<  }
<  
277c144
< <h1>HTML Mouse Events</h1>
---
> <h1>HTML onmouseout and onmouseleave and onmouseup and onmousedown Events</h1>
280,283c147,156
< <table class=table id=mytable onclick='oclk(this);' ondblclick='oclkommd(this);' onmousemove='oclkommo(this);' onmouseover='oclkomov(this);' onwheel='oclkomwh(this);'  onmouseleave='oclkoml(this);' onmouseout='oclkomo(this);' onmouseup='oclkomu(this);' onmousedown='oclkomd(this);' border=20>
< <thead class=thead id=mythead onclick='oclk(this);' ondblclick='oclkommd(this);' onmousemove='oclkommo(this);' onmouseover='oclkomov(this);' onwheel='oclkomwh(this);'  onmouseleave='oclkoml(this);' onmouseout='oclkomo(this);' onmouseup='oclkomu(this);' onmousedown='oclkomd(this);'>
< <tr class=tr id=mytheadtr onclick='oclk(this);' ondblclick='oclkommd(this);' onmousemove='oclkommo(this);' onmouseover='oclkomov(this);' onwheel='oclkomwh(this);'  onmouseleave='oclkoml(this);' onmouseout='oclkomo(this);' onmouseup='oclkomu(this);' onmousedown='oclkomd(this);'>
< <td class=td id=mytheadtdl onclick='oclk(this);' ondblclick='oclkommd(this);' onmousemove='oclkommo(this);' onmouseover='oclkomov(this);' onwheel='oclkomwh(this);'  onmouseleave='oclkoml(this);' onmouseout='oclkomo(this);' onmouseup='oclkomu(this);' onmousedown='oclkomd(this);'>stopPropagation</td><td class=td id=mytheadtdr onclick='oclk(this);' ondblclick='oclkommd(this);' onmousemove='oclkommo(this);' onmouseover='oclkomov(this);' onwheel='oclkomwh(this);'  onmouseleave='oclkoml(this);' onmouseout='oclkomo(this);' onmouseup='oclkomu(this);' onmousedown='oclkomd(this);'>preventDefault</td>
---
> <h4 id=myh4></h4>
> <h4 id=myh4oml></h4>
> <h4 id=myh4omo></h4>
> <h4 id=myh4omu></h4>
> <h4 id=myh4omd></h4>
> 
> <table id=mytable onclick='oclk(this);' onmouseleave='oclkoml(this);' onmouseout='oclkomo(this);' onmouseup='oclkomu(this);' onmousedown='oclkomd(this);' border=20>
> <thead id=mythead onclick='oclk(this);' onmouseleave='oclkoml(this);' onmouseout='oclkomo(this);' onmouseup='oclkomu(this);' onmousedown='oclkomd(this);'>
> <tr id=mytheadtr onclick='oclk(this);' onmouseleave='oclkoml(this);' onmouseout='oclkomo(this);' onmouseup='oclkomu(this);' onmousedown='oclkomd(this);'>
> <td id=mytheadtdl onclick='oclk(this);' onmouseleave='oclkoml(this);' onmouseout='oclkomo(this);' onmouseup='oclkomu(this);' onmousedown='oclkomd(this);'>stopPropagation</td><td id=mytheadtdr onclick='oclk(this);' onmouseleave='oclkoml(this);' onmouseout='oclkomo(this);' onmouseup='oclkomu(this);' onmousedown='oclkomd(this);'>preventDefault</td>
286,292c159,165
< <tbody id=mytbody onclick='oclk(this);' ondblclick='oclkommd(this);' onmousemove='oclkommo(this);' onmouseover='oclkomov(this);' onwheel='oclkomwh(this);'  onmouseleave='oclkoml(this);' onmouseout='oclkomo(this);' onmouseup='oclkomu(this);' onmousedown='oclkomd(this);'>
< <tr class=tr id=mybodytr onclick='oclk(this);' ondblclick='oclkommd(this);' onmousemove='oclkommo(this);' onmouseover='oclkomov(this);' onwheel='oclkomwh(this);'  onmouseleave='oclkoml(this);' onmouseout='oclkomo(this);' onmouseup='oclkomu(this);' onmousedown='oclkomd(this);'>
< <td class=td id=mytbodytdl onclick='oclk(this);' ondblclick='oclkommd(this);' onmousemove='oclkommo(this);' onmouseover='oclkomov(this);' onwheel='oclkomwh(this);'  onmouseleave='oclkoml(this);' onmouseout='oclkomo(this);' onmouseup='oclkomu(this);' onmousedown='oclkomd(this);'>
< <form class=form method='GET' onsubmit=" alert('Ready?'); return true;" id='fstopPropagation' action='./onmouseleave.htm' onclick='oclk(this);' ondblclick='oclkommd(this);' onmousemove='oclkommo(this);' onmouseover='oclkomov(this);' onwheel='oclkomwh(this);'  onmouseleave='oclkoml(this);' onmouseout='oclkomo(this);' onmouseup='oclkomu(this);' onmousedown='oclkomd(this);'>
< <input class=text id='itextstopPropagation' type='text' onclick='oclk(this);' ondblclick='oclkommd(this);' onmousemove='oclkommo(this);' onmouseover='oclkomov(this);' onwheel='oclkomwh(this);'  onmouseleave='oclkoml(this);' onmouseout='oclkomo(this);' onmouseup='oclkomu(this);' onmousedown='oclkomd(this);' value='' placeholder='stopPropagation form' /><br>
< <input class=button id='stextstopPropagation' type='button' onclick="event.stopPropagation(); oclk(this); cid='sbtextstopPropagation'; setTimeout(csub,3000); window.open('https://developer.mozilla.org/en-US/docs/Web/API/Event/stopPropagation','_blank','top=200,left=500,height=600,width=600');" value='stopPropagation' />
< <input class=submit style='display:none;' id='sbtextstopPropagation' type='submit' value='stopPropagation' />
---
> <tbody id=mytbody onclick='oclk(this);' onmouseleave='oclkoml(this);' onmouseout='oclkomo(this);' onmouseup='oclkomu(this);' onmousedown='oclkomd(this);'>
> <tr id=mybodytr onclick='oclk(this);' onmouseleave='oclkoml(this);' onmouseout='oclkomo(this);' onmouseup='oclkomu(this);' onmousedown='oclkomd(this);'>
> <td id=mytbodytdl onclick='oclk(this);' onmouseleave='oclkoml(this);' onmouseout='oclkomo(this);' onmouseup='oclkomu(this);' onmousedown='oclkomd(this);'>
> <form method='GET' onsubmit=" alert('Ready?'); return true;" id='fstopPropagation' action='./onmouseleave.htm' onclick='oclk(this);' onmouseleave='oclkoml(this);' onmouseout='oclkomo(this);' onmouseup='oclkomu(this);' onmousedown='oclkomd(this);'>
> <input id='itextstopPropagation' type='text' onclick='oclk(this);' onmouseleave='oclkoml(this);' onmouseout='oclkomo(this);' onmouseup='oclkomu(this);' onmousedown='oclkomd(this);' value='' placeholder='stopPropagation form' /><br>
> <input id='stextstopPropagation' type='button' onclick="event.stopPropagation(); oclk(this); cid='sbtextstopPropagation'; setTimeout(csub,3000); window.open('https://developer.mozilla.org/en-US/docs/Web/API/Event/stopPropagation','_blank','top=200,left=500,height=600,width=600');" value='stopPropagation' />
> <input style='display:none;' id='sbtextstopPropagation' type='submit' value='stopPropagation' />
294,298c167,171
< </td><td class=td id=mytbodytdr onclick='oclk(this);' ondblclick='oclkommd(this);' onmousemove='oclkommo(this);' onmouseover='oclkomov(this);' onwheel='oclkomwh(this);'  onmouseleave='oclkoml(this);' onmouseout='oclkomo(this);' onmouseup='oclkomu(this);' onmousedown='oclkomd(this);'>
< <form class=form method='GET' onsubmit="alert('Ready?'); return true;" id='fpreventDefault' action='./onmouseleave.htm' onclick='oclk(this);' ondblclick='oclkommd(this);' onmousemove='oclkommo(this);' onmouseover='oclkomov(this);' onwheel='oclkomwh(this);'  onmouseleave='oclkoml(this);' onmouseout='oclkomo(this);' onmouseup='oclkomu(this);' onmousedown='oclkomd(this);'>
< <input class=text id='itextpreventDefault' type='text' onclick='oclk(this);' ondblclick='oclkommd(this);' onmousemove='oclkommo(this);' onmouseover='oclkomov(this);' onwheel='oclkomwh(this);'  onmouseleave='oclkoml(this);' onmouseout='oclkomo(this);' onmouseup='oclkomu(this);' onmousedown='oclkomd(this);' value='' placeholder='preventDefault form' /><br>
< <input class=checkbox id='stextpreventDefault' type='checkbox' onclick="event.preventDefault(); oclk(this); cid='sbtextpreventDefault'; setTimeout(csub,3000); window.open('https://developer.mozilla.org/en-US/docs/Web/API/Event/preventDefault','_blank','top=200,left=500,height=600,width=600'); " value='preventDefault' />&nbsp;preventDefault
< <input class=submit style='display:none;' id='sbtextpreventDefault' type='submit' value='preventDefault' />
---
> </td><td id=mytbodytdr onclick='oclk(this);' onmouseleave='oclkoml(this);' onmouseout='oclkomo(this);' onmouseup='oclkomu(this);' onmousedown='oclkomd(this);'>
> <form method='GET' onsubmit="alert('Ready?'); return true;" id='fpreventDefault' action='./onmouseleave.htm' onclick='oclk(this);' onmouseleave='oclkoml(this);' onmouseout='oclkomo(this);' onmouseup='oclkomu(this);' onmousedown='oclkomd(this);'>
> <input id='itextpreventDefault' type='text' onclick='oclk(this);' onmouseleave='oclkoml(this);' onmouseout='oclkomo(this);' onmouseup='oclkomu(this);' onmousedown='oclkomd(this);' value='' placeholder='preventDefault form' /><br>
> <input id='stextpreventDefault' type='checkbox' onclick="event.preventDefault(); oclk(this); cid='sbtextpreventDefault'; setTimeout(csub,3000); window.open('https://developer.mozilla.org/en-US/docs/Web/API/Event/preventDefault','_blank','top=200,left=500,height=600,width=600'); " value='preventDefault' />&nbsp;preventDefault
> <input style='display:none;' id='sbtextpreventDefault' type='submit' value='preventDefault' />
304,314d176
< 
< <h4 id=myh4></h4>
< <h4 id=myh4oml></h4>
< <h4 id=myh4omo></h4>
< <h4 id=myh4omu></h4>
< <h4 id=myh4omd></h4>
< 
< <h4 id=myh4omdb></h4>
< <h4 id=myh4omov></h4>
< <h4 id=myh4ommo></h4>
< <h4 id=myh4omwh></h4>