{"id":58802,"date":"2023-03-30T03:01:52","date_gmt":"2023-03-29T17:01:52","guid":{"rendered":"http:\/\/www.rjmprogramming.com.au\/ITblog\/?p=58802"},"modified":"2023-03-30T06:59:10","modified_gmt":"2023-03-29T20:59:10","slug":"onclick-event-propagation-event-curbs-tutorial","status":"publish","type":"post","link":"https:\/\/www.rjmprogramming.com.au\/ITblog\/onclick-event-propagation-event-curbs-tutorial\/","title":{"rendered":"Onclick Event Propagation Event Curbs Tutorial"},"content":{"rendered":"<div style=\"width: 230px\" class=\"wp-caption alignnone\"><a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/onclick_propagation.html\"><img decoding=\"async\" style=\"border: 15px solid pink;\" alt=\"Onclick Event Propagation Event Curbs Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/onclick_propagation_stop_prevent.jpg\" title=\"Onclick Event Propagation Event Curbs Tutorial\"  style=\"float:left;\"  \/><\/a><p class=\"wp-caption-text\">Onclick Event Propagation Event Curbs Tutorial<\/p><\/div>\n<p>As as with yesterday&#8217;s <a title='Onclick Event Propagation Event Nuance Tutorial' href='#oepent'>Onclick Event Propagation Event Nuance Tutorial<\/a> encouraging event &#8220;events&#8221; Javascript allows for at least two <a target=_blank title=? href='https:\/\/www.youtube.com\/watch?v=nfHoixiaDuQ'>&#8220;curbs on that enthusiasm&#8221;<\/a> &#8230; <\/p>\n<ul>\n<li>event.<a target=_blank title='Javascript event.preventDefault() method information from W3schools' href='https:\/\/www.w3schools.com\/jsref\/event_preventdefault.asp'>preventDefault<\/a>();<br \/>\n<blockquote cite='https:\/\/www.w3schools.com\/jsref\/event_preventdefault.asp'><p>\nThe preventDefault() method cancels the event if it is cancelable, meaning that the default action that belongs to the event will not occur.<br \/>\n<br \/>\nFor example, this can be useful when:<br \/>\n<br \/>\nClicking on a &#8220;Submit&#8221; button, prevent it from submitting a form<br \/>\nClicking on a link, prevent the link from following the URL<br \/>\nNote: Not all events are cancelable. Use the cancelable property to find out if an event is cancelable.<br \/>\n<br \/>\nNote: The preventDefault() method does not prevent further propagation of an event through the DOM. Use the stopPropagation() method to handle this.\n<\/p><\/blockquote>\n<\/li>\n<li>event.<a target=_blank title='Javascript event.stopPropagation() method information from W3schools' href='https:\/\/www.w3schools.com\/jsref\/event_stoppropagation.asp'>stopPropagation<\/a>();<br \/>\n<blockquote cite='https:\/\/www.w3schools.com\/jsref\/event_stoppropagation.asp'><p>\nThe stopPropagation() method prevents propagation of the same event from being called.<br \/>\n<br \/>\nPropagation means bubbling up to parent elements or capturing down to child elements.\n<\/p><\/blockquote>\n<\/li>\n<\/ul>\n<p>Both, as well as an inhouse &#8220;No Onclick&#8221; option become ways, via a dropdown choice, to tailor their &#8220;event&#8221; potencies.  We make <i>event.preventDefault()<\/i> usage the default, for instance, if the user selects to get interested in the <font size=1>(what we like to call the &#8220;right click&#8221;)<\/font> <i>oncontextmenu<\/i> event, to stifle the operating system menu that normally appears with a &#8220;right click&#8221; operation in the webpage &#8230;<\/p>\n<p><code><br \/>\n    if (document.getElementById('actionsel').value.indexOf('preventDefault') != -1) {  event.preventDefault();  }<br \/>\n    if (document.getElementById('actionsel').value.indexOf('stopPropagation') != -1) {  event.stopPropagation();  }<br \/>\n<\/code><\/p>\n<p> &#8230; in  <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/Geographicals\/diff.php?one=http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/onclick_propagation.html----GETME\">the changed<\/a> <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/onclick_propagation.html----GETME\">&#8220;proof of concept&#8221; onclick_propagation.html<\/a> <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/onclick_propagation.html\" title=\"Click picture\">Sestet web application<\/a> you can also <a href='#myifop'>try below<\/a>.<\/p>\n<p><!--p>You can also see this play out at WordPress 4.1.1's <a target=_blank  href='\/\/www.rjmprogramming.com.au\/ITblog\/new-onclick-event-propagation-event-nuance-tutorial\/'>New Onclick Event Propagation Event Nuance Tutorial<\/a> ...<\/p>\n\n\n\n\n\n<hr>\n\n\n\n\n\n<p id='oepent'>Previous relevant <a target=_blank title='Onclick Event Propagation Event Nuance Tutorial' href='\/\/www.rjmprogramming.com.au\/ITblog\/onclick-event-propagation-event-nuance-tutorial\/'>Onclick Event Propagation Event Nuance Tutorial<\/a> is shown below.<\/p>\n\n\n\n[caption id=\"\" align=\"alignnone\" width=\"220\" caption=\"Onclick Event Propagation Event Nuance Tutorial\"]<a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/onclick_propagation.html\"><img decoding=\"async\" style=\"border: 15px solid pink;\" alt=\"Onclick Event Propagation Event Nuance Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/onclick_propagation_nuance.jpg\" title=\"Onclick Event Propagation Event Nuance Tutorial\"  style=\"float:left;\"  \/><\/a>[\/caption]\n\n\n\n<p>When mobile technology became big, so too did \"touch\" screen technology, and the concept of a \"gesture\" (in the event driven programming woooooorrrrrlllldddd) such as a \"pinch\" or \"spread\" gesture, and \"two finger\" or more, gestures.  And though we're (just starting with) tipping our toes into a vast \"ocean of possibility\" here, nevertheless, even with non-mobile event work, centralizing the event logic, whether it be propagated or not, we have the \"event\" object tools, now, to offer more nuance as to what the user is doing as regards their pointing device, here, with our experimental new web application we are developing currently, on top of the progress onto yesterday's <a title='Onclick Event Propagation Event Type Tutorial' href='#oepett'>Onclick Event Propagation Event Type Tutorial<\/a>.<\/p>\n\n\n\n\n\n<p>We want to creep up on logic to discern \"double click\" (as an \"ondblclick\" event possibility, or via the \"onclick\" event) or \"discrete click\" (or even non-mobile \"hover\") ideas, as far as \"user behaviour\" goes, <font color=blue>as per<\/font> ...<\/p>\n\n\n\n<code>\n  function ttlook() {\n     var tspecific=' pinch';\n     if (wasscale &gt; isscale) {\n          tspecific=' Pinch';\n     } else if (isscale &gt; wasscale) {\n          tspecific=' Spread';\n     } else if (eval('' + ote.split(':').length) &gt;= 5) {\n       if (eval(ote.split(':')[1].split(',')[0].trim()) &gt; eval(ote.split(':')[3].split(',')[0].trim())) {\n        if (eval(ote.split(':')[1].split(',')[1].split(' ')[0].trim()) &lt;= eval(ote.split(':')[3].split(',')[1].split(' ')[0].trim())) {\n          tspecific=' spread';\n        }\n       } else if (eval(ote.split(':')[1].split(',')[0].trim()) &lt; eval(ote.split(':')[3].split(',')[0].trim())) {\n        if (eval(ote.split(':')[1].split(',')[1].split(' ')[0].trim()) &gt;= eval(ote.split(':')[3].split(',')[1].split(' ')[0].trim())) {\n          tspecific=' spread';\n        } \n       }\n     } else {\n       tspecific='';\n     }\n     document.getElementById('numbers').innerHTML='of touch' + tspecific + ' gesture ';\n     document.getElementById('numberst').innerHTML='of touch' + tspecific + ' gesture ';\n     \/\/document.getElementById('numbers').innerHTML+=ote; \/\/('(' + event.targetTouches.length + ') ' + event.targetTouches[0].clientX + ',' + event.targetTouches[0].clientY + ' to ' + event.targetTouches[1].clientX + ',' + event.targetTouches[1].clientY);  \n     ote='';\n  }\n<br \/>  \n  function assesslater() {\n     saveuntil-=100;\n     if (saveuntil &gt; 0) {\n       setTimeout(assesslater, 100); \n     } else {\n       if (numtype.indexOf(',') != -1 || numtype.indexOf('touch') != -1) {   \/\/ multiple event analysis\n         document.getElementById('numberst').innerHTML='';\n         var numtypeslength=numtypes.length;\n         for (var ii=0; ii&lt;eval(-1 + numtypes.length); ii++) {\n           if (numtypes[eval(-1 + numtypes.length)] != numtypes[ii]) { numtypeslength--;  }\n         }\n         \/\/if (numtypes[0] == numtypes[1]) {\n         \/\/  document.getElementById('myh1').innerHTML+=' Multiple event ' + numtypes[0] + ' ' + ('' + new Date());\n         \/\/}\n         if (numtypes[eval(-1 + numtypes.length)].indexOf('dblclick') != -1) {\n           if (numtypes[eval(-1 + numtypes.length)].split(':')[2] == numtypes[eval(-2 + numtypes.length)].split(':')[2]) {\n             document.getElementById('numbers').innerHTML='of programmed for double click';\n           } else {\n             document.getElementById('numbers').innerHTML='of quick programmed for propagated clicking';\n           }\n         } else if (numtypes[eval(-1 + numtypes.length)].indexOf('click') != -1) {\n           if (numtypes[eval(-1 + numtypes.length)] == numtypes[eval(-2 + numtypes.length)]) {\n             document.getElementById('numbers').innerHTML='of programmed for discrete ' + numtypeslength + 'x clicking';\n           } else if (numtypes[eval(-1 + numtypes.length)].split(':')[2] == numtypes[eval(-2 + numtypes.length)].split(':')[2]) {\n             document.getElementById('numbers').innerHTML='of programmed for click';\n           } else {\n             document.getElementById('numbers').innerHTML='of fast programmed for propagated clicking';\n           }\n         } else if (numtypes[eval(-1 + numtypes.length)].indexOf('contextmenu') != -1) {\n           if (numtypes[eval(-1 + numtypes.length)] == numtypes[eval(-2 + numtypes.length)]) {\n             document.getElementById('numbers').innerHTML='of programmed for discrete ' + numtypeslength + 'x right clicking';\n           } else if (numtypes[eval(-1 + numtypes.length)].split(':')[2] == numtypes[eval(-2 + numtypes.length)].split(':')[2]) {\n             document.getElementById('numbers').innerHTML='of programmed for right click';\n           } else {\n             document.getElementById('numbers').innerHTML='of fast programmed for propagated right clicking';\n           }\n         } else if (numtypes[eval(-1 + numtypes.length)].indexOf('mouseo') != -1) {\n           if (numtypes[eval(-1 + numtypes.length)] == numtypes[eval(-2 + numtypes.length)]) {\n             document.getElementById('numbers').innerHTML='of programmed for discrete ' + numtypeslength + 'x hovering';\n           } else if (numtypes[eval(-1 + numtypes.length)].split(':')[2] == numtypes[eval(-2 + numtypes.length)].split(':')[2]) {\n             document.getElementById('numbers').innerHTML='of programmed for hovering';\n           } else {\n             document.getElementById('numbers').innerHTML='of fast programmed for roaming type of hovering';\n           }\n         } else if (numtypes[eval(-1 + numtypes.length)].indexOf('touchend') != -1) {\n           ttlook();\n           document.getElementById('numberst').innerHTML=document.getElementById('numbers').innerHTML;\n         } else {\n           document.getElementById('numbers').innerHTML='';\n           document.getElementById('numberst').innerHTML='';\n         }\n       } \n       numtype='';\n       numtypes=[];\n       saveuntil=2000;\n     }\n  }\n<\/code>\n\n\n\n<p> ... in <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/Geographicals\/diff.php?one=http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/onclick_propagation.html---GETME\">the changed<\/a> <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/onclick_propagation.html---GETME\">\"proof of concept\" onclick_propagation.html<\/a> <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/onclick_propagation.html\" title=\"Click picture\">Sestet web application<\/a> you can also <a href='#myifop'>try below<\/a>.<\/p>\n\n\n\n<!--p>You can also see this play out at WordPress 4.1.1's <a target=_blank  href='\/\/www.rjmprogramming.com.au\/ITblog\/onclick-event-propagation-event-nuance-tutorial\/'>Onclick Event Propagation Event Nuance Tutorial<\/a>.<\/p-->\n<hr>\n<p id='oepett'>Previous relevant <a target=_blank title='Onclick Event Propagation Event Type Tutorial' href='\/\/www.rjmprogramming.com.au\/ITblog\/onclick-event-propagation-event-type-tutorial\/'>Onclick Event Propagation Event Type Tutorial<\/a> is shown below.<\/p>\n<div style=\"width: 230px\" class=\"wp-caption alignnone\"><a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/onclick_propagation.html\"><img decoding=\"async\" style=\"border: 15px solid pink;\" alt=\"Onclick Event Propagation Event Type Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/onclick_propagation_type.jpg\" title=\"Onclick Event Propagation Event Type Tutorial\"  style=\"float:left;\"  \/><\/a><p class=\"wp-caption-text\">Onclick Event Propagation Event Type Tutorial<\/p><\/div>\n<p>On top of yesterday&#8217;s <a title='Onclick Event Propagation Event Target Tutorial' href='#oepett'>Onclick Event Propagation Event Target Tutorial<\/a> &#8230;<\/p>\n<ul>\n<li>event.target &#8230; theme, today we have a &#8230;<\/li>\n<li><a target=_blank title='Javascript event.type information' href='https:\/\/www.w3schools.com\/jsref\/event_type.asp'>event.type<\/a> &#8230;<\/li>\n<\/ul>\n<p> &#8230; theme<font size=1>, the added bonus being that we finally got to use the word &#8220;<font color=magenta><i>touchdown<\/i><\/font>&#8220;, in all seriousness, in a blog posting&#8217;s code logic &#8230; yay!!!<\/font>  Yes, as we hadn&#8217;t used before (in our memory) but available to use <font size=1>(and today we do)<\/font> is the idea of &#8230;<\/p>\n<ul>\n<li>a single event Javascript function &#8230; that can &#8220;multipurpose&#8221; itself, even further than the &#8220;event.target&#8221; helped with this, via &#8230;\n<li>event.type recognition of HTML <font color=blue>added to as per<\/font> &#8230;<br \/>\n<code><br \/>\n&lt;body onclick=\"moi(this);\"<font color=blue> onmouseover=\"moi(this);\" onmouseout=\"moi(this);\"  onmousedown=\"moi(this);\" ontouchdown=\"moi(this);\" ontouchstart=\"moi(this);\" ontouchend=\"moi(this);\"<\/font>&gt;<br \/>\n<\/code>\n<\/li>\n<\/ul>\n<p> &#8230; making itself useful adding optional window.open popup <a target=_blank title=Google href='http:\/\/www.google.com'>Google<\/a> search functionality <font color=blue>as per<\/font> &#8230;<\/p>\n<p><code><br \/>\n  <font color=blue>function commonev(othis) {<br \/>\n    if (eval('' + jdc) &gt;= eval('' + lotsofsix.length)) { jdc=0;  }<br \/>\n    jdc=Math.floor(Math.random() * lotsofsix.length);<br \/>\n    if ((',' + cindxs + ',').indexOf(',' + othis.outerHTML.substring(1).split(' ')[0].split('&gt;')[0] + ':') != -1) {<br \/>\n    if (lastajax != lotsofsix[jdc].split(';')[eval((',' + cindxs + ',').split(',' + othis.outerHTML.substring(1).split(' ')[0].split('&gt;')[0] + ':')[1].split(',')[0])].replace(\/\\&lt;br\\&gt;\/g, String.fromCharCode(10))) {<br \/>\n    lastajax=lotsofsix[jdc].split(';')[eval((',' + cindxs + ',').split(',' + othis.outerHTML.substring(1).split(' ')[0].split('&gt;')[0] + ':')[1].split(',')[0])].replace(\/\\&lt;br\\&gt;\/g, String.fromCharCode(10));<br \/>\n    ajaxit(lotsofsix[jdc].split(';')[eval((',' + cindxs + ',').split(',' + othis.outerHTML.substring(1).split(' ')[0].split('&gt;')[0] + ':')[1].split(',')[0])].replace(\/\\&lt;br\\&gt;\/g, String.fromCharCode(10)));<br \/>\n    }<br \/>\n    }<br \/>\n  }<\/font><br \/>\n<br \/>\n  function moi(othis) {<br \/>\n    var extras='';<br \/>\n<br \/>\n    <font color=blue>switch ('' + event.type) {<br \/>\n    case 'mouseover':<br \/>\n    if (document.getElementById('mycbomo').checked && document.getElementById('eventtype').value == ('' + event.type)) {<br \/>\n     commonev(othis);<br \/>\n    }<br \/>\n    break;<br \/>\n<br \/>\n    case 'mousedown':<br \/>\n    if (document.getElementById('mycbomo').checked && document.getElementById('eventtype').value == ('' + event.type)) {<br \/>\n     commonev(othis);<br \/>\n    }<br \/>\n    break;<br \/>\n<br \/>\n    case 'mouseoout':<br \/>\n    if (document.getElementById('mycbomo').checked && document.getElementById('eventtype').value == ('' + event.type)) {<br \/>\n     commonev(othis);<br \/>\n    }<br \/>\n    break;<br \/>\n<br \/>\n    case 'touchstart':<br \/>\n    if (document.getElementById('mycbomo').checked && document.getElementById('eventtype').value == ('' + event.type)) {<br \/>\n     commonev(othis);<br \/>\n    }<br \/>\n    break;<br \/>\n<br \/>\n    case '<\/font><font color=magenta title='yay!!!'><i>touchdown<\/i><\/font><font color=blue>':<br \/>\n    if (document.getElementById('mycbomo').checked && document.getElementById('eventtype').value == ('' + event.type)) {<br \/>\n     commonev(othis);<br \/>\n    }<br \/>\n    break;<br \/>\n<br \/>\n    case 'touchend':<br \/>\n    if (document.getElementById('mycbomo').checked && document.getElementById('eventtype').value == ('' + event.type)) {<br \/>\n     commonev(othis);<br \/>\n    }<br \/>\n    break;<br \/>\n<br \/> <br \/>\n    case 'click':<\/font><br \/>\n    \/\/document.getElementById('myh1').innerHTML+=' ' + event.target.outerHTML.substring(1).split(' ')[0].split('&gt;')[0];<br \/>\n    if (('' + event.target.outerHTML).substring(1).split(' ')[0].split('&gt;')[0] != 'button') {<br \/>\n    if (eval('' + jdc) &gt;= eval('' + lotsofsix.length)) { jdc=0;  }<br \/>\n    \/\/alert('2967 ' +  othis.outerHTML.substring(1).split(' ')[0].split('&gt;')[0]);<br \/>\n    if ((',' + cindxs + ',').indexOf(',' + othis.outerHTML.substring(1).split(' ')[0].split('&gt;')[0] + ':') != -1) {<br \/>\n    \/\/alert((',' + cindxs + ',').split(',' + othis.outerHTML.substring(1).split(' ')[0].split('&gt;')[0] + ':')[1].split(',')[0] + ' ' + jdc + ' ' + lotsofsix[jdc]);<br \/>\n    jdc=Math.floor(Math.random() * lotsofsix.length);<br \/>\n    thisalert('This ' + othis.outerHTML.substring(1).split(' ')[0].split('&gt;')[0] + ' sestet snippet is  ... ' + lotsofsix[jdc].split(';')[eval((',' + cindxs + ',').split(',' + othis.outerHTML.substring(1).split(' ')[0].split('&gt;')[0] + ':')[1].split(',')[0])].replace(\/\\&lt;br\\&gt;\/g, String.fromCharCode(10)));<br \/>\n    }<br \/>\n    } else if (othis.outerHTML.substring(1).split(' ')[0].split('&gt;')[0] == 'details' || (othis.outerHTML.substring(1).split(' ')[0].split('&gt;')[0] == 'body' && blurbsuffix == '') || noway) {<br \/>\n    \/\/alert(1967);<br \/>\n    noway=true;<br \/>\n    if (othis.outerHTML.substring(1).split(' ')[0].split('&gt;')[0] == 'body') { noway=false; }<br \/>\n    } else {<br \/>\n    \/\/alert(blurbsuffix + ' ... ' + othis.outerHTML.substring(1).split(' ')[0].split('&gt;')[0]);<br \/>\n    if (('' + othis.id) != '') {  extras=' ID=' + othis.id; idfound=true; } else {<br \/>\n    if (eval('' + jdc) &gt;= eval('' + lotsofsix.length)) { jdc=0;  }<br \/>\n    if (eval('' + detnum) &gt; 0) {<br \/>\n    if (lotsofsix[jdc].split(';')[idc].indexOf('&lt;br&gt;') != -1) {<br \/>\n    if (document.getElementById('det' + eval(-1 + detnum))) {<br \/>\n    document.getElementById('det' + eval(-1 + detnum)).open=false;<br \/>\n    }<br \/>\n    }<br \/>\n    }<br \/>\n    blurb+='&lt;br&gt;' + lotsofsix[jdc].split(';')[idc].replace('&lt;br&gt;', '&lt;br&gt;&lt;details onclick=\"noway=false;\" id=det' + detnum + ' open&gt;&lt;summary&gt;') + detsuffix; detsuffix='';<br \/>\n    }<br \/>\n    detsuffix='';<br \/>\n    if (othis.outerHTML.substring(1).split(' ')[0].split('&gt;')[0] == 'body' && !idfound) {<br \/>\n    var suf=tableize(blurb.replace('&lt;\/summary&gt;&lt;br&gt;', '&lt;\/summary&gt;') + blurbsuffix);<br \/>\n    if (suf != '') { document.getElementById('results').innerHTML+=suf; }<br \/>\n    \/\/alert(document.getElementById('results').innerHTML);<br \/>\n    detsuffix='';<br \/>\n    blurbsuffix='';<br \/>\n    detnum++;<br \/>\n    } else if (idfound) {<br \/>\n    detsuffix='';<br \/>\n    blurbsuffix='';<br \/>\n    document.getElementById('results').innerHTML+=othis.outerHTML.substring(1).split(' ')[0].split('&gt;')[0] + extras + ' clicked.&lt;br&gt;';<br \/>\n    } else if (('' + event.target.outerHTML).substring(1).split(' ')[0].split('&gt;')[0] != 'button') {<br \/>\n    \/\/alert(967);<br \/>\n    if ((',' + cindxs + ',').indexOf(',' + othis.outerHTML.substring(1).split(' ')[0].split('&gt;')[0] + ':') != -1) {<br \/>\n    jdc=Math.floor(Math.random() * lotsofsix.length);<br \/>\n    thisalert('This ' + othis.outerHTML.substring(1).split(' ')[0].split('&gt;')[0] + ' sestet snippet is  ... ' + lotsofsix[jdc].split(';')[eval((',' + cindxs + ',').split(',' + othis.outerHTML.substring(1).split(' ')[0].split('&gt;')[0] + ':')[1].split(',')[0])].replace(\/\\&lt;br\\&gt;\/g, String.fromCharCode(10)));<br \/>\n    }<br \/>\n    }<br \/>\n    jdc++;<br \/>\n    }<font color=blue><br \/>\n    break;<br \/>\n<br \/> <br \/>\n    default:<br \/>\n    break;<br \/>\n    }<\/font><br \/>\n  }<br \/>\n<\/code><\/p>\n<p> &#8230; in <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/Geographicals\/diff.php?one=http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/onclick_propagation.html--GETME\">the changed<\/a> <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/onclick_propagation.html--GETME\">&#8220;proof of concept&#8221; onclick_propagation.html<\/a> <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/onclick_propagation.html\" title=\"Click picture\">Sestet web application<\/a> you can also <a href='#myifop'>try below<\/a>.<\/p>\n<p><!--p>You can also see this play out at WordPress 4.1.1's <a target=_blank  href='\/\/www.rjmprogramming.com.au\/ITblog\/onclick-event-propagation-event-type-tutorial\/'>Onclick Event Propagation Event Type Tutorial<\/a>.<\/p-->\n<hr>\n<p id='oepett'>Previous relevant <a target=_blank title='Onclick Event Propagation Event Target Tutorial' href='\/\/www.rjmprogramming.com.au\/ITblog\/onclick-event-propagation-event-target-tutorial\/'>Onclick Event Propagation Event Target Tutorial<\/a> is shown below.<\/p>\n<div style=\"width: 230px\" class=\"wp-caption alignnone\"><a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/onclick_propagation.html\"><img decoding=\"async\" style=\"border: 15px solid pink;\" alt=\"Onclick Event Propagation Event Target Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/onclick_propagation_event_target.jpg\" title=\"Onclick Event Propagation Event Target Tutorial\"  style=\"float:left;\"  \/><\/a><p class=\"wp-caption-text\">Onclick Event Propagation Event Target Tutorial<\/p><\/div>\n<p>Yesterday&#8217;s <a title='Onclick Event Propagation Primer Tutorial' href='#oeppt'>Onclick Event Propagation Primer Tutorial<\/a> approach to harnessing the &#8220;powers of propagation&#8221; was a bit &#8220;scattergun&#8221;.  We never referenced the very useful &#8230;<\/p>\n<p><code><br \/>\n<a target=_blank title='event.target information from W3schools' href='https:\/\/www.w3schools.com\/jsref\/event_target.asp'>event.target<\/a><br \/>\n<\/code><\/p>\n<p> &#8230; global variable that can be used in Javascript event logic to get the element where the event originated, as distinct from <i>function moi<\/i>&#8216;s &#8220;othis&#8221; argument, which points at the HTML webpage element calling the &#8220;onclick&#8221; event logic.<\/p>\n<p>Its use can <font color=blue>add nuance<\/font> to the reworked &#8220;onclick&#8221; event sharing Javascript function &#8230;<\/p>\n<p><code><br \/>\n  function moi(othis) {<br \/>\n    var extras='';<br \/>\n    \/\/document.getElementById('myh1').innerHTML+=' ' + event.target.outerHTML.substring(1).split(' ')[0].split('&gt;')[0];<br \/>\n    <font color=blue>if (('' + event.target.outerHTML).substring(1).split(' ')[0].split('&gt;')[0] != 'button') {<br \/>\n    if (eval('' + jdc) &gt;= eval('' + lotsofsix.length)) { jdc=0;  }<br \/>\n    \/\/alert('2967 ' +  othis.outerHTML.substring(1).split(' ')[0].split('&gt;')[0]);<br \/>\n    if ((',' + cindxs + ',').indexOf(',' + othis.outerHTML.substring(1).split(' ')[0].split('&gt;')[0] + ':') != -1) {<br \/>\n    \/\/alert((',' + cindxs + ',').split(',' + othis.outerHTML.substring(1).split(' ')[0].split('&gt;')[0] + ':')[1].split(',')[0] + ' ' + jdc + ' ' + lotsofsix[jdc]);<br \/>\n    jdc=Math.floor(Math.random() * lotsofsix.length);<br \/>\n    alert('This ' + othis.outerHTML.substring(1).split(' ')[0].split('&gt;')[0] + ' sestet snippet is  ... ' + lotsofsix[jdc].split(';')[eval((',' + cindxs + ',').split(',' + othis.outerHTML.substring(1).split(' ')[0].split('&gt;')[0] + ':')[1].split(',')[0])].replace(\/\\&lt;br\\&gt;\/g, String.fromCharCode(10)));<br \/>\n    }<br \/>\n    } else <\/font>if (othis.outerHTML.substring(1).split(' ')[0].split('&gt;')[0] == 'details' || (othis.outerHTML.substring(1).split(' ')[0].split('&gt;')[0] == 'body' && blurbsuffix == '') || noway) {<br \/>\n    \/\/alert(1967);<br \/>\n    noway=true;<br \/>\n    if (othis.outerHTML.substring(1).split(' ')[0].split('&gt;')[0] == 'body') { noway=false; }<br \/>\n    } else {<br \/>\n    \/\/alert(blurbsuffix + ' ... ' + othis.outerHTML.substring(1).split(' ')[0].split('&gt;')[0]);<br \/>\n    if (('' + othis.id) != '') {  extras=' ID=' + othis.id; idfound=true; } else {<br \/>\n    if (eval('' + jdc) &gt;= eval('' + lotsofsix.length)) { jdc=0;  }<br \/>\n    if (eval('' + detnum) &gt; 0) {<br \/>\n    if (lotsofsix[jdc].split(';')[idc].indexOf('&lt;br&gt;') != -1) {<br \/>\n    if (document.getElementById('det' + eval(-1 + detnum))) {<br \/>\n    document.getElementById('det' + eval(-1 + detnum)).open=false;<br \/>\n    }<br \/>\n    }<br \/>\n    }<br \/>\n    blurb+='&lt;br&gt;' + lotsofsix[jdc].split(';')[idc].replace('&lt;br&gt;', '&lt;br&gt;&lt;details onclick=\"noway=false;\" id=det' + detnum + ' open&gt;&lt;summary&gt;') + detsuffix; detsuffix='';<br \/>\n    }<br \/>\n    detsuffix='';<br \/>\n    if (othis.outerHTML.substring(1).split(' ')[0].split('&gt;')[0] == 'body' && !idfound) {<br \/>\n    var suf=tableize(blurb.replace('&lt;\/summary&gt;&lt;br&gt;', '&lt;\/summary&gt;') + blurbsuffix);<br \/>\n    if (suf != '') { document.getElementById('results').innerHTML+=suf; }<br \/>\n    \/\/alert(document.getElementById('results').innerHTML);<br \/>\n    detsuffix='';<br \/>\n    blurbsuffix='';<br \/>\n    detnum++;<br \/>\n    } else if (idfound) {<br \/>\n    detsuffix='';<br \/>\n    blurbsuffix='';<br \/>\n    document.getElementById('results').innerHTML+=othis.outerHTML.substring(1).split(' ')[0].split('&gt;')[0] + extras + ' clicked.&lt;br&gt;';<br \/>\n    }<font color=blue> else if (('' + event.target.outerHTML).substring(1).split(' ')[0].split('&gt;')[0] != 'button') {<br \/>\n    \/\/alert(967);<br \/>\n    if ((',' + cindxs + ',').indexOf(',' + othis.outerHTML.substring(1).split(' ')[0].split('&gt;')[0] + ':') != -1) {<br \/>\n    jdc=Math.floor(Math.random() * lotsofsix.length);<br \/>\n    alert('This ' + othis.outerHTML.substring(1).split(' ')[0].split('&gt;')[0] + ' sestet snippet is  ... ' + lotsofsix[jdc].split(';')[eval((',' + cindxs + ',').split(',' + othis.outerHTML.substring(1).split(' ')[0].split('&gt;')[0] + ':')[1].split(',')[0])].replace(\/\\&lt;br\\&gt;\/g, String.fromCharCode(10)));<br \/>\n    }<\/font><br \/>\n    }<br \/>\n    jdc++;<br \/>\n    }<br \/>\n  }<br \/>\n<\/code><\/p>\n<p> &#8230; in <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/Geographicals\/diff.php?one=http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/onclick_propagation.html-GETME\">the changed<\/a> <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/onclick_propagation.html-GETME\">&#8220;proof of concept&#8221; onclick_propagation.html<\/a> <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/onclick_propagation.html\" title=\"Click picture\">Sestet web application<\/a> you can also <a href='#myifop'>try below<\/a>.<\/p>\n<p><!--p>You can also see this play out at WordPress 4.1.1's <a target=_blank  href='\/\/www.rjmprogramming.com.au\/ITblog\/onclick-event-propagation-event-target-tutorial\/'>Onclick Event Propagation Event Target Tutorial<\/a>.<\/p-->\n<hr>\n<p id='oeppt'>Previous relevant <a target=_blank title='Onclick Event Propagation Primer Tutorial' href='\/\/www.rjmprogramming.com.au\/ITblog\/onclick-event-propagation-primer-tutorial\/'>Onclick Event Propagation Primer Tutorial<\/a> is shown below.<\/p>\n<div style=\"width: 230px\" class=\"wp-caption alignnone\"><a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/onclick_propagation.html\"><img decoding=\"async\" style=\"border: 15px solid pink;\" alt=\"Onclick Event Propagation Primer Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/onclick_propagation.jpg\" title=\"Onclick Event Propagation Primer Tutorial\"  style=\"float:left;\"  \/><\/a><p class=\"wp-caption-text\">Onclick Event Propagation Primer Tutorial<\/p><\/div>\n<p>A basis for web application event driven programming strategies references &#8230;<\/p>\n<ul>\n<li>element nesting and inheritance &#8230;<\/li>\n<li>the default event propagation up through the element hierarchy<\/li>\n<\/ul>\n<p>Of course you can ignore how this event &#8220;bubbling&#8221; can be harnessed, and indeed, we normally do not harness this event programming abilities in webpages, but not today!   Today, we want to harness, via &#8220;onclick&#8221; event (sharing a common &#8230;<\/p>\n<p><code><br \/>\n  function moi(othis) {<br \/>\n    var extras='';<br \/>\n    if (othis.outerHTML.substring(1).split(' ')[0].split('&gt;')[0] == 'details' || (othis.outerHTML.substring(1).split(' ')[0].split('&gt;')[0] == 'body' && blurbsuffix == '') || noway) {<br \/>\n    noway=true;<br \/>\n    if (othis.outerHTML.substring(1).split(' ')[0].split('&gt;')[0] == 'body') { noway=false; }<br \/>\n    } else {<br \/>\n    \/\/alert(blurbsuffix + ' ... ' + othis.outerHTML.substring(1).split(' ')[0].split('&gt;')[0]);<br \/>\n    if (('' + othis.id) != '') {  extras=' ID=' + othis.id; idfound=true; } else {<br \/>\n    if (eval('' + jdc) &gt;= eval('' + lotsofsix.length)) { jdc=0;  }<br \/>\n    if (eval('' + detnum) &gt; 0) {<br \/>\n    if (lotsofsix[jdc].split(';')[idc].indexOf('&lt;br&gt;') != -1) {<br \/>\n    if (document.getElementById('det' + eval(-1 + detnum))) {<br \/>\n    document.getElementById('det' + eval(-1 + detnum)).open=false;<br \/>\n    }<br \/>\n    }<br \/>\n    }<br \/>\n    blurb+='&lt;br&gt;' + lotsofsix[jdc].split(';')[idc].replace('&lt;br&gt;', '&lt;br&gt;&lt;details onclick=\"noway=false;\" id=det' + detnum + ' open&gt;&lt;summary&gt;') + detsuffix; detsuffix='';<br \/>\n    }<br \/>\n    detsuffix='';<br \/>\n    if (othis.outerHTML.substring(1).split(' ')[0].split('&gt;')[0] == 'body' && !idfound) {<br \/>\n    var suf=tableize(blurb.replace('&lt;\/summary&gt;&lt;br&gt;', '&lt;\/summary&gt;') + blurbsuffix);<br \/>\n    if (suf != '') { document.getElementById('results').innerHTML+=suf; }<br \/>\n    \/\/alert(document.getElementById('results').innerHTML);<br \/>\n    detsuffix='';<br \/>\n    blurbsuffix='';<br \/>\n    detnum++;<br \/>\n    } else if (idfound) {<br \/>\n    detsuffix='';<br \/>\n    blurbsuffix='';<br \/>\n    document.getElementById('results').innerHTML+=othis.outerHTML.substring(1).split(' ')[0].split('&gt;')[0] + extras + ' clicked.&lt;br&gt;';<br \/>\n    }<br \/>\n    jdc++;<br \/>\n    }<br \/>\n  }<br \/>\n<\/code><\/p>\n<p> &#8230; event &#8220;onclick&#8221; logic Javascript function, as above) propagation, the sharing of piecing together the content display of &#8230;<\/p>\n<p><code><br \/>\nSestet poems and rhymes<br \/>\n<\/code><\/p>\n<p> &#8230; where the six lines of poetry are written out by the &#8220;onclick&#8221; events of &#8230;<\/p>\n<ol>\n<li>button<\/li>\n<li>td<\/li>\n<li>tr<\/li>\n<li>tbody<\/li>\n<li>table<\/li>\n<li>body<\/li>\n<\/ol>\n<p> &#8230; in hierarchical order in the <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/onclick_propagation.html_GETME\">&#8220;proof of concept&#8221; onclick_propagation.html<\/a> <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/onclick_propagation.html\" title=\"Click picture\">Sestet web application<\/a> you can also try below &#8230;<\/p>\n<p><iframe id=myifop style=\"width:100%;height:800px;\" src=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/onclick_propagation.html\"><\/iframe><\/p>\n<p>If this was interesting you may be interested in <a title='Click here to see topics in which you might be interested' href='#d58771' onclick='var dv=document.getElementById(\"d58771\"); dv.innerHTML = \"&lt;iframe width=670 height=600 src=\" + \"https:\/\/www.rjmprogramming.com.au\/ITblog\/tag\/onclick\" + \"&gt;&lt;\/iframe&gt;\"; dv.style.display = \"block\";'>this<\/a> too.<\/p>\n<div id='d58771' style='display: none; border-left: 2px solid green; border-top: 2px solid green;'><\/div>\n<hr>\n<p>If this was interesting you may be interested in <a title='Click here to see topics in which you might be interested' href='#d58777' onclick='var dv=document.getElementById(\"d58777\"); dv.innerHTML = \"&lt;iframe width=670 height=600 src=\" + \"https:\/\/www.rjmprogramming.com.au\/ITblog\/tag\/event\" + \"&gt;&lt;\/iframe&gt;\"; dv.style.display = \"block\";'>this<\/a> too.<\/p>\n<div id='d58777' style='display: none; border-left: 2px solid green; border-top: 2px solid green;'><\/div>\n<hr>\n<p>If this was interesting you may be interested in <a title='Click here to see topics in which you might be interested' href='#d58783' onclick='var dv=document.getElementById(\"d58783\"); dv.innerHTML = \"&lt;iframe width=670 height=600 src=\" + \"https:\/\/www.rjmprogramming.com.au\/ITblog\/tag\/type\" + \"&gt;&lt;\/iframe&gt;\"; dv.style.display = \"block\";'>this<\/a> too.<\/p>\n<div id='d58783' style='display: none; border-left: 2px solid green; border-top: 2px solid green;'><\/div>\n<hr>\n<p>If this was interesting you may be interested in <a title='Click here to see topics in which you might be interested' href='#d58795' onclick='var dv=document.getElementById(\"d58795\"); dv.innerHTML = \"&lt;iframe width=670 height=600 src=\" + \"https:\/\/www.rjmprogramming.com.au\/ITblog\/tag\/touch\" + \"&gt;&lt;\/iframe&gt;\"; dv.style.display = \"block\";'>this<\/a> too.<\/p>\n<div id='d58795' style='display: none; border-left: 2px solid green; border-top: 2px solid green;'><\/div>\n<hr>\n<p>If this was interesting you may be interested in <a title='Click here to see topics in which you might be interested' href='#d58802' onclick='var dv=document.getElementById(\"d58802\"); dv.innerHTML = \"&lt;iframe width=670 height=600 src=\" + \"https:\/\/www.rjmprogramming.com.au\/ITblog\/tag\/constraint\" + \"&gt;&lt;\/iframe&gt;\"; dv.style.display = \"block\";'>this<\/a> too.<\/p>\n<div id='d58802' style='display: none; border-left: 2px solid green; border-top: 2px solid green;'><\/div>\n","protected":false},"excerpt":{"rendered":"<p>As as with yesterday&#8217;s Onclick Event Propagation Event Nuance Tutorial encouraging event &#8220;events&#8221; Javascript allows for at least two &#8220;curbs on that enthusiasm&#8221; &#8230; event.preventDefault(); The preventDefault() method cancels the event if it is cancelable, meaning that the default action &hellip; <a href=\"https:\/\/www.rjmprogramming.com.au\/ITblog\/onclick-event-propagation-event-curbs-tutorial\/\">Continue reading <span class=\"meta-nav\">&rarr;<\/span><\/a><\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[12,14,37],"tags":[2397,4291,2143,2368,4294,354,400,4296,4295,4292,4293,485,513,564,576,608,652,2621,4290,861,4288,3341,967,2941,997,2786,4289,4287,2940,3883,3565,1294,1319,1671,1433],"class_list":["post-58802","post","type-post","status-publish","format-standard","hentry","category-elearning","category-event-driven-programming","category-tutorials","tag-bubble","tag-bubbling","tag-case","tag-constraint","tag-curb","tag-dom","tag-event","tag-event-preventdefault","tag-event-stoppropagation","tag-event-target","tag-event-type","tag-gesture","tag-google","tag-hierarchy","tag-html","tag-inheritance","tag-javascript","tag-nesting","tag-nursery-rhyme","tag-onclick","tag-poem","tag-poetry","tag-popup","tag-preventdefault","tag-programming","tag-propagation","tag-rhyme","tag-sestet","tag-stoppropagation","tag-switch","tag-target","tag-touch","tag-tutorial","tag-type","tag-window-open"],"_links":{"self":[{"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/posts\/58802"}],"collection":[{"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/comments?post=58802"}],"version-history":[{"count":6,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/posts\/58802\/revisions"}],"predecessor-version":[{"id":58808,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/posts\/58802\/revisions\/58808"}],"wp:attachment":[{"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/media?parent=58802"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/categories?post=58802"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/tags?post=58802"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}