<html>
<title>Onclick Event Propagation - RJM Programming - March, 2023</title>
<head>
<style>
details { display: flex; }
table { font-size: 12px; }
td { background-image: linear-gradient(#f0f0f0, #f2f2f2, #f4f4f4, #f6f6f6, #f8f8f8, #fafafa); }
</style>
<script type='text/javascript'>
// Thanks to Behind Me Dips Eternity, by Emily Dickinson
// Thanks to https://sites.google.com/site/examplesinpoetry/sestet-poetry-example-definition
var detsuffix='</summary>';
var blurbsuffix='</details>';
var detnum=0;
var noway=false;
var lastajax='', lasturl='';
var idc=0, jdc=0;
var idfound=false;
var blurb='', rawhtml='';
var ilots=0;
var myxhr=null;
var thisa='';
var wos=[null, null, null, null, null, null];
var wosurl=['', '', '', '', '', ''];
var cindxs="button:0,td:1,tr:2,tbody:3,table:4,body:5";
var indxs=["button:0", "td:1", "tr:2", "tbody:3", "table:4", "body:5"];
var cols=["#f0f0f0", "#f2f2f2", "#f4f4f4", "#f6f6f6", "#f8f8f8", "#fafafa"];
// Thanks to https://bilingualkidspot.com/2018/04/23/popular-nursery-rhymes-for-kids-english/
var lotsofsix=["<br>O mistress mine, where are you roaming?;<br>It was many and many a year ago,;<br>Behind Me .. dips Eternity ..;<br>There was a farmer who had a dog,;<br>Five little ducks;<br>That well I deem each mountain, wood and plain,",
"O stay and hear! your true-love's coming ;In a kingdom by the sea,;Before Me .. Immortality ..;And Bingo was his name-O.;Went out one day;And river knows, what I from man conceal,",
"That can sing both high and low;That a maiden there lived whom you may know;Myself .. the Term between ..;B-I-N-G-O!;Over the hill and far away;What dreary hues my life's fond prospects dim.",
"Trip no further, pretty sweeting,;By the name of ANNABEL LEE;Death but the Drift of Eastern Gray,;B-I-N-G-O!;Mother duck said;Yet whate'er wild or savage paths I've ta'en,",
"Journey's end in lovers' meeting-- ;And this maiden she lived with no other thought;Dissolving into Dawn away,;B-I-N-G-O!;'Quack, quack, quack, quack.';Where'er I wander, love attends me still,",
"Every wise man's son doth know.;Than to love and be loved by me.;Before the West begin ..;And Bingo was his name-O!;But only four little ducks came back.;Soft whisp'ring to my soul, and I to him."];
function dalert() {
var thata='';
if (thisa != '') {
thata=thisa;
thisa='';
alert(thata);
}
}
function thisalert(inb) {
thisa=inb;
setTimeout(dalert, 4000);
}
function tableize(what) {
var dih=document.getElementById('results').innerHTML, trih='';
if (document.getElementById('results').innerHTML.indexOf('<table') == -1) {
what='<table cellpadding=20 cellspacing=20><tbody><tr id=mywhat><td>' + what + '</td></tr></tbody></table>';
} else if (!idfound) {
//alert('what=' + what + ' and ' + dih.replace('</tr>', '<td>' + what + '</td></tr>'));
if (1 == 1) {
trih=document.getElementById('mywhat').innerHTML;
//alert(": " + '<summary' + what.split('<summary')[1].split('</summary>')[0] + '</summary>');
//if (trih.indexOf('<summary' + what.split('<summary')[1].split('</summary>')[0] + '</summary>') == -1) {
// if (1 == 2) { alert('<summary' + what.split('<summary')[1].split('</summary>')[0] + '</summary> not found in ' + trih); }
//} else if (trih.replace('' + '<summary' + what.split('<summary')[1].split('</summary>')[0] + '</summary>','<summary></summary>') == trih.replace('' + '<summary' + what.split('<summary')[1].split('</summary>')[0] + '</summary>','<summary></summary>').replace(/\<td\>\<br\>\<br\>\<details[^>]+\>\<summary\>\<\/summary\>[^/]+\/details\>\<\/td\>/g, '')) {
// alert('<summary' + what.split('<summary')[1].split('</summary>')[0] + '</summary>' + ' ... did not find in ' + trih.replace('' + '<summary' + what.split('<summary')[1].split('</summary>')[0] + '</summary>','<summary></summary>'));
//}
//trih=trih.replace(/\<td\>\<br\>\<br\>\<details[^>]+\<summary\>\<\/summary\>[^/]+\/details\>\<\/td\>/g, '');
document.getElementById('mywhat').innerHTML='<td>' + what + '</td>' + trih.replace('' + '<summary' + what.split('<summary')[1].split('</summary>')[0] + '</summary>','<summary></summary>').replace(/\<td\>\<br\>\<br\>\<details[^>]+\<summary\>\<\/summary\>[^/]+\/details\>\<\/td\>/g, '');
trih=document.getElementById('mywhat').innerHTML;
if (trih != trih.replace(/\<td\>\<br\>\<br\>\<details[^>]+\>\<summary\>\<\/summary\>[^/]+\/details\>\<\/td\>/g, '')) {
trih=trih.replace(/\<td\>\<br\>\<br\>\<details[^>]+\>\<summary\>\<\/summary\>[^/]+\/details\>\<\/td\>/g, '');
document.getElementById('mywhat').innerHTML=trih;
}
//alert(document.getElementById('results').innerHTML);
} else {
document.getElementById('results').innerHTML=dih.replace('</tr>', '<td>' + what + '</td></tr>');
}
return '';
}
return what;
}
function ouralert(ins) {
var ok=true;
if (ins == '' && lasturl != '') {
for (var i=0; i<wosurl.length; i++) {
if (wosurl[i].indexOf(lasturl) != -1) { ok=false; }
}
if (ok) {
if (wos[jdc]) {
if (!wos[jdc].closed) {
wos[jdc].close();
}
}
wosurl[jdc]=lasturl;
wos[jdc]=window.open(lasturl, '_blank', 'top=' + eval(-600 + eval('' + screen.height)) + ',left=' + eval(-600 + eval('' + screen.width)) + ',width=600,height=600');
}
//lasturl='';
} else {
if (wos[jdc]) {
if (!wos[jdc].closed) {
wos[jdc].close();
}
}
wos[jdc]=window.open('', '_blank', 'top=50,left=50,width=600,height=600');
wos[jdc].document.write(ins);
}
}
function stateChanged() {
if (myxhr.readyState == 4) {
if (myxhr.status == 200) {
console.log('myxhr=' + myxhr);
rawhtml = myxhr.response;
ouralert(rawhtml);
}
}
}
function ajaxit(parturl) {
myxhr = new XMLHttpRequest();
if (myxhr) {
if (1 == 11) {
myxhr.open('GET', '//www.thoughtco.com/search?q=' + encodeURIComponent(parturl), true);
myxhr.onreadystatechange=stateChanged;
myxhr.send(null);
} else if (1 == 1) {
if (lasturl != '//www.google.com/search?q=' + encodeURIComponent(parturl)) {
lasturl='//www.google.com/search?q=' + encodeURIComponent(parturl);
ouralert('');
}
} else {
var xurl = './getme.php';
var formis = new FormData();
if (myxhr) {
// https://www.google.com/search?q=mary+had&sxsrf=APwXEdd8WBBsDjbjGl2EFNFASHbQnV9rNw%3A1679888964273&source=hp&ei=RBIhZJntDqrK2roPy6KWwA0&iflsig=AOEireoAAAAAZCEgVHCla3RdkWinrVGkAaOlMAyaTEbX&ved=0ahUKEwiZn-eHmvv9AhUqpVYBHUuRBdgQ4dUDCAo&uact=5&oq=mary+had&gs_lcp=Cgdnd3Mtd2l6EAMyBAgjECcyBQgAEIAEMgUIABCABDIFCAAQgAQyBQgAEIAEMgUIABCABDIFCAAQgAQyBQgAEIAEMgUIABCABDIFCAAQgAQ6CwgAEIAEELEDEIMBOhEILhCABBCxAxCDARDHARDRAzoOCC4QigUQsQMQgwEQ1AI6CwguEIoFELEDEIMBOggILhCABBCxAzoOCC4QgAQQsQMQgwEQ1AI6CwgAEIoFELEDEIMBOgUILhCABDoLCC4QgAQQxwEQrwE6DgguEIAEELEDEMcBEK8BOgsILhCABBCxAxDUAjoRCC4QigUQsQMQgwEQxwEQrwE6CAgAEIAEELEDOggILhCABBDUAjoLCC4QgAQQsQMQgwFQAFjKDWCAD2gAcAB4AIABgwKIAdwLkgEFMC43LjGYAQCgAQE&sclient=gws-wiz
formis.append('q', 'http://www.google.com/search?q=' + encodeURIComponent(parturl));
myxhr.open('POST', xurl); //, true);
myxhr.onreadystatechange=stateChanged;
myxhr.send(formis);
}
}
}
}
function moi(othis) {
var extras='';
switch ('' + event.type) {
case 'mouseover':
if (document.getElementById('mycbomo').checked && document.getElementById('eventtype').value == ('' + event.type)) {
if (eval('' + jdc) >= eval('' + lotsofsix.length)) { jdc=0; }
jdc=Math.floor(Math.random() * lotsofsix.length);
if ((',' + cindxs + ',').indexOf(',' + othis.outerHTML.substring(1).split(' ')[0].split('>')[0] + ':') != -1) {
if (lastajax != lotsofsix[jdc].split(';')[eval((',' + cindxs + ',').split(',' + othis.outerHTML.substring(1).split(' ')[0].split('>')[0] + ':')[1].split(',')[0])].replace(/\<br\>/g, String.fromCharCode(10))) {
lastajax=lotsofsix[jdc].split(';')[eval((',' + cindxs + ',').split(',' + othis.outerHTML.substring(1).split(' ')[0].split('>')[0] + ':')[1].split(',')[0])].replace(/\<br\>/g, String.fromCharCode(10));
ajaxit(lotsofsix[jdc].split(';')[eval((',' + cindxs + ',').split(',' + othis.outerHTML.substring(1).split(' ')[0].split('>')[0] + ':')[1].split(',')[0])].replace(/\<br\>/g, String.fromCharCode(10)));
}
}
}
break;
case 'mousedown':
if (document.getElementById('mycbomo').checked && document.getElementById('eventtype').value == ('' + event.type)) {
if (eval('' + jdc) >= eval('' + lotsofsix.length)) { jdc=0; }
jdc=Math.floor(Math.random() * lotsofsix.length);
if ((',' + cindxs + ',').indexOf(',' + othis.outerHTML.substring(1).split(' ')[0].split('>')[0] + ':') != -1) {
if (lastajax != lotsofsix[jdc].split(';')[eval((',' + cindxs + ',').split(',' + othis.outerHTML.substring(1).split(' ')[0].split('>')[0] + ':')[1].split(',')[0])].replace(/\<br\>/g, String.fromCharCode(10))) {
lastajax=lotsofsix[jdc].split(';')[eval((',' + cindxs + ',').split(',' + othis.outerHTML.substring(1).split(' ')[0].split('>')[0] + ':')[1].split(',')[0])].replace(/\<br\>/g, String.fromCharCode(10));
ajaxit(lotsofsix[jdc].split(';')[eval((',' + cindxs + ',').split(',' + othis.outerHTML.substring(1).split(' ')[0].split('>')[0] + ':')[1].split(',')[0])].replace(/\<br\>/g, String.fromCharCode(10)));
}
}
}
break;
case 'mouseoout':
if (document.getElementById('mycbomo').checked && document.getElementById('eventtype').value == ('' + event.type)) {
if (eval('' + jdc) >= eval('' + lotsofsix.length)) { jdc=0; }
jdc=Math.floor(Math.random() * lotsofsix.length);
if ((',' + cindxs + ',').indexOf(',' + othis.outerHTML.substring(1).split(' ')[0].split('>')[0] + ':') != -1) {
if (lastajax != lotsofsix[jdc].split(';')[eval((',' + cindxs + ',').split(',' + othis.outerHTML.substring(1).split(' ')[0].split('>')[0] + ':')[1].split(',')[0])].replace(/\<br\>/g, String.fromCharCode(10))) {
lastajax=lotsofsix[jdc].split(';')[eval((',' + cindxs + ',').split(',' + othis.outerHTML.substring(1).split(' ')[0].split('>')[0] + ':')[1].split(',')[0])].replace(/\<br\>/g, String.fromCharCode(10));
ajaxit(lotsofsix[jdc].split(';')[eval((',' + cindxs + ',').split(',' + othis.outerHTML.substring(1).split(' ')[0].split('>')[0] + ':')[1].split(',')[0])].replace(/\<br\>/g, String.fromCharCode(10)));
}
}
}
break;
case 'touchstart':
if (document.getElementById('mycbomo').checked && document.getElementById('eventtype').value == ('' + event.type)) {
if (eval('' + jdc) >= eval('' + lotsofsix.length)) { jdc=0; }
jdc=Math.floor(Math.random() * lotsofsix.length);
if ((',' + cindxs + ',').indexOf(',' + othis.outerHTML.substring(1).split(' ')[0].split('>')[0] + ':') != -1) {
if (lastajax != lotsofsix[jdc].split(';')[eval((',' + cindxs + ',').split(',' + othis.outerHTML.substring(1).split(' ')[0].split('>')[0] + ':')[1].split(',')[0])].replace(/\<br\>/g, String.fromCharCode(10))) {
lastajax=lotsofsix[jdc].split(';')[eval((',' + cindxs + ',').split(',' + othis.outerHTML.substring(1).split(' ')[0].split('>')[0] + ':')[1].split(',')[0])].replace(/\<br\>/g, String.fromCharCode(10));
ajaxit(lotsofsix[jdc].split(';')[eval((',' + cindxs + ',').split(',' + othis.outerHTML.substring(1).split(' ')[0].split('>')[0] + ':')[1].split(',')[0])].replace(/\<br\>/g, String.fromCharCode(10)));
}
}
}
break;
case 'touchdown':
if (document.getElementById('mycbomo').checked && document.getElementById('eventtype').value == ('' + event.type)) {
if (eval('' + jdc) >= eval('' + lotsofsix.length)) { jdc=0; }
jdc=Math.floor(Math.random() * lotsofsix.length);
if ((',' + cindxs + ',').indexOf(',' + othis.outerHTML.substring(1).split(' ')[0].split('>')[0] + ':') != -1) {
if (lastajax != lotsofsix[jdc].split(';')[eval((',' + cindxs + ',').split(',' + othis.outerHTML.substring(1).split(' ')[0].split('>')[0] + ':')[1].split(',')[0])].replace(/\<br\>/g, String.fromCharCode(10))) {
lastajax=lotsofsix[jdc].split(';')[eval((',' + cindxs + ',').split(',' + othis.outerHTML.substring(1).split(' ')[0].split('>')[0] + ':')[1].split(',')[0])].replace(/\<br\>/g, String.fromCharCode(10));
ajaxit(lotsofsix[jdc].split(';')[eval((',' + cindxs + ',').split(',' + othis.outerHTML.substring(1).split(' ')[0].split('>')[0] + ':')[1].split(',')[0])].replace(/\<br\>/g, String.fromCharCode(10)));
}
}
}
break;
case 'touchend':
if (document.getElementById('mycbomo').checked && document.getElementById('eventtype').value == ('' + event.type)) {
if (eval('' + jdc) >= eval('' + lotsofsix.length)) { jdc=0; }
jdc=Math.floor(Math.random() * lotsofsix.length);
if ((',' + cindxs + ',').indexOf(',' + othis.outerHTML.substring(1).split(' ')[0].split('>')[0] + ':') != -1) {
if (lastajax != lotsofsix[jdc].split(';')[eval((',' + cindxs + ',').split(',' + othis.outerHTML.substring(1).split(' ')[0].split('>')[0] + ':')[1].split(',')[0])].replace(/\<br\>/g, String.fromCharCode(10))) {
lastajax=lotsofsix[jdc].split(';')[eval((',' + cindxs + ',').split(',' + othis.outerHTML.substring(1).split(' ')[0].split('>')[0] + ':')[1].split(',')[0])].replace(/\<br\>/g, String.fromCharCode(10));
ajaxit(lotsofsix[jdc].split(';')[eval((',' + cindxs + ',').split(',' + othis.outerHTML.substring(1).split(' ')[0].split('>')[0] + ':')[1].split(',')[0])].replace(/\<br\>/g, String.fromCharCode(10)));
}
}
}
break;
case 'click':
//document.getElementById('myh1').innerHTML+=' ' + event.target.outerHTML.substring(1).split(' ')[0].split('>')[0];
if (('' + event.target.outerHTML).substring(1).split(' ')[0].split('>')[0] != 'button') {
if (eval('' + jdc) >= eval('' + lotsofsix.length)) { jdc=0; }
//alert('2967 ' + othis.outerHTML.substring(1).split(' ')[0].split('>')[0]);
if ((',' + cindxs + ',').indexOf(',' + othis.outerHTML.substring(1).split(' ')[0].split('>')[0] + ':') != -1) {
//alert((',' + cindxs + ',').split(',' + othis.outerHTML.substring(1).split(' ')[0].split('>')[0] + ':')[1].split(',')[0] + ' ' + jdc + ' ' + lotsofsix[jdc]);
jdc=Math.floor(Math.random() * lotsofsix.length);
thisalert('This ' + othis.outerHTML.substring(1).split(' ')[0].split('>')[0] + ' sestet snippet is ... ' + lotsofsix[jdc].split(';')[eval((',' + cindxs + ',').split(',' + othis.outerHTML.substring(1).split(' ')[0].split('>')[0] + ':')[1].split(',')[0])].replace(/\<br\>/g, String.fromCharCode(10)));
}
} else if (othis.outerHTML.substring(1).split(' ')[0].split('>')[0] == 'details' || (othis.outerHTML.substring(1).split(' ')[0].split('>')[0] == 'body' && blurbsuffix == '') || noway) {
//alert(1967);
noway=true;
if (othis.outerHTML.substring(1).split(' ')[0].split('>')[0] == 'body') { noway=false; }
} else {
//alert(blurbsuffix + ' ... ' + othis.outerHTML.substring(1).split(' ')[0].split('>')[0]);
if (('' + othis.id) != '') { extras=' ID=' + othis.id; idfound=true; } else {
if (eval('' + jdc) >= eval('' + lotsofsix.length)) { jdc=0; }
if (eval('' + detnum) > 0) {
if (lotsofsix[jdc].split(';')[idc].indexOf('<br>') != -1) {
if (document.getElementById('det' + eval(-1 + detnum))) {
document.getElementById('det' + eval(-1 + detnum)).open=false;
}
}
}
blurb+='<br>' + lotsofsix[jdc].split(';')[idc].replace('<br>', '<br><details onclick="noway=false;" id=det' + detnum + ' open><summary>') + detsuffix; detsuffix='';
}
detsuffix='';
if (othis.outerHTML.substring(1).split(' ')[0].split('>')[0] == 'body' && !idfound) {
var suf=tableize(blurb.replace('</summary><br>', '</summary>') + blurbsuffix);
if (suf != '') { document.getElementById('results').innerHTML+=suf; }
//alert(document.getElementById('results').innerHTML);
detsuffix='';
blurbsuffix='';
detnum++;
} else if (idfound) {
detsuffix='';
blurbsuffix='';
document.getElementById('results').innerHTML+=othis.outerHTML.substring(1).split(' ')[0].split('>')[0] + extras + ' clicked.<br>';
} else if (('' + event.target.outerHTML).substring(1).split(' ')[0].split('>')[0] != 'button') {
//alert(967);
if ((',' + cindxs + ',').indexOf(',' + othis.outerHTML.substring(1).split(' ')[0].split('>')[0] + ':') != -1) {
jdc=Math.floor(Math.random() * lotsofsix.length);
thisalert('This ' + othis.outerHTML.substring(1).split(' ')[0].split('>')[0] + ' sestet snippet is ... ' + lotsofsix[jdc].split(';')[eval((',' + cindxs + ',').split(',' + othis.outerHTML.substring(1).split(' ')[0].split('>')[0] + ':')[1].split(',')[0])].replace(/\<br\>/g, String.fromCharCode(10)));
}
}
jdc++;
}
break;
default:
break;
}
}
</script>
</head>
<body onclick="moi(this);" onmouseover="moi(this);" onmouseout="moi(this);" onmousedown="moi(this);" ontouchdown="moi(this);" ontouchstart="moi(this);" ontouchend="moi(this);">
<h1 id=myh1>Sestet Examples</h1>
<h3>RJM Programming - March, 2023</h3>
<h4>Showing Onclick Event Propagation in <input type=checkbox id=mycbomo style=display:inline-block;></input> <select style=display:inline-block; id=eventtype><option value=mouseover>Onmouseover</option><option value=mousedown>Onmousedown</option><option value=mouseout>Onmouseout</option><option value=touchstart>Ontouchstart</option><option value=touchdown>Ontouchdown</option><option value=touchend>Ontouchend</option></select> Action</h4>
<h5>Thanks to <a target=_blank title='https://sites.google.com/site/examplesinpoetry/sestet-poetry-example-definition' href='https://sites.google.com/site/examplesinpoetry/sestet-poetry-example-definition'>Examples in Poetry</a> and <a target=_blank title='https://bilingualkidspot.com/2018/04/23/popular-nursery-rhymes-for-kids-english/' href='https://bilingualkidspot.com/2018/04/23/popular-nursery-rhymes-for-kids-english/'>Bilingual Kidspot</a> and Emily Dickinson and William Shakespeare</h5>
<table border=20 onclick="moi(this);" onmouseover="moi(this);" onmouseout="moi(this);" onmousedown="moi(this);" ontouchdown="moi(this);" ontouchstart="moi(this);" ontouchend="moi(this);">
<tbody onclick="moi(this);" onmouseover="moi(this);" onmouseout="moi(this);" onmousedown="moi(this);" ontouchdown="moi(this);" ontouchstart="moi(this);" ontouchend="moi(this);">
<tr onclick="moi(this);" onmouseover="moi(this);" onmouseout="moi(this);" onmousedown="moi(this);" ontouchdown="moi(this);" ontouchstart="moi(this);" ontouchend="moi(this);"><td onclick="moi(this);" onmouseover="moi(this);" onmouseout="moi(this);" onmousedown="moi(this);" ontouchdown="moi(this);" ontouchstart="moi(this);" ontouchend="moi(this);"><button onclick=" detsuffix='</summary>'; blurbsuffix='</details>'; idc=Math.floor(Math.random() * lotsofsix[0].split(';').length); jdc=0; blurb=''; idfound=false; moi(this);" title="Little Ditty">Sestet ...</button></td></tr>
</tbody>
</table>
<br><br>
<div id=results style='border: 5px dotted green;display:block;'>
</div>
</body>
</html>