Onclick Event Propagation Event Nuance Tutorial
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 Onclick Event Propagation Event Type Tutorial.
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, as per …
function ttlook() {
var tspecific=' pinch';
if (wasscale > isscale) {
tspecific=' Pinch';
} else if (isscale > wasscale) {
tspecific=' Spread';
} else if (eval('' + ote.split(':').length) >= 5) {
if (eval(ote.split(':')[1].split(',')[0].trim()) > eval(ote.split(':')[3].split(',')[0].trim())) {
if (eval(ote.split(':')[1].split(',')[1].split(' ')[0].trim()) <= eval(ote.split(':')[3].split(',')[1].split(' ')[0].trim())) {
tspecific=' spread';
}
} else if (eval(ote.split(':')[1].split(',')[0].trim()) < eval(ote.split(':')[3].split(',')[0].trim())) {
if (eval(ote.split(':')[1].split(',')[1].split(' ')[0].trim()) >= eval(ote.split(':')[3].split(',')[1].split(' ')[0].trim())) {
tspecific=' spread';
}
}
} else {
tspecific='';
}
document.getElementById('numbers').innerHTML='of touch' + tspecific + ' gesture ';
document.getElementById('numberst').innerHTML='of touch' + tspecific + ' gesture ';
//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);
ote='';
}
function assesslater() {
saveuntil-=100;
if (saveuntil > 0) {
setTimeout(assesslater, 100);
} else {
if (numtype.indexOf(',') != -1 || numtype.indexOf('touch') != -1) { // multiple event analysis
document.getElementById('numberst').innerHTML='';
var numtypeslength=numtypes.length;
for (var ii=0; ii<eval(-1 + numtypes.length); ii++) {
if (numtypes[eval(-1 + numtypes.length)] != numtypes[ii]) { numtypeslength--; }
}
//if (numtypes[0] == numtypes[1]) {
// document.getElementById('myh1').innerHTML+=' Multiple event ' + numtypes[0] + ' ' + ('' + new Date());
//}
if (numtypes[eval(-1 + numtypes.length)].indexOf('dblclick') != -1) {
if (numtypes[eval(-1 + numtypes.length)].split(':')[2] == numtypes[eval(-2 + numtypes.length)].split(':')[2]) {
document.getElementById('numbers').innerHTML='of programmed for double click';
} else {
document.getElementById('numbers').innerHTML='of quick programmed for propagated clicking';
}
} else if (numtypes[eval(-1 + numtypes.length)].indexOf('click') != -1) {
if (numtypes[eval(-1 + numtypes.length)] == numtypes[eval(-2 + numtypes.length)]) {
document.getElementById('numbers').innerHTML='of programmed for discrete ' + numtypeslength + 'x clicking';
} else if (numtypes[eval(-1 + numtypes.length)].split(':')[2] == numtypes[eval(-2 + numtypes.length)].split(':')[2]) {
document.getElementById('numbers').innerHTML='of programmed for click';
} else {
document.getElementById('numbers').innerHTML='of fast programmed for propagated clicking';
}
} else if (numtypes[eval(-1 + numtypes.length)].indexOf('contextmenu') != -1) {
if (numtypes[eval(-1 + numtypes.length)] == numtypes[eval(-2 + numtypes.length)]) {
document.getElementById('numbers').innerHTML='of programmed for discrete ' + numtypeslength + 'x right clicking';
} else if (numtypes[eval(-1 + numtypes.length)].split(':')[2] == numtypes[eval(-2 + numtypes.length)].split(':')[2]) {
document.getElementById('numbers').innerHTML='of programmed for right click';
} else {
document.getElementById('numbers').innerHTML='of fast programmed for propagated right clicking';
}
} else if (numtypes[eval(-1 + numtypes.length)].indexOf('mouseo') != -1) {
if (numtypes[eval(-1 + numtypes.length)] == numtypes[eval(-2 + numtypes.length)]) {
document.getElementById('numbers').innerHTML='of programmed for discrete ' + numtypeslength + 'x hovering';
} else if (numtypes[eval(-1 + numtypes.length)].split(':')[2] == numtypes[eval(-2 + numtypes.length)].split(':')[2]) {
document.getElementById('numbers').innerHTML='of programmed for hovering';
} else {
document.getElementById('numbers').innerHTML='of fast programmed for roaming type of hovering';
}
} else if (numtypes[eval(-1 + numtypes.length)].indexOf('touchend') != -1) {
ttlook();
document.getElementById('numberst').innerHTML=document.getElementById('numbers').innerHTML;
} else {
document.getElementById('numbers').innerHTML='';
document.getElementById('numberst').innerHTML='';
}
}
numtype='';
numtypes=[];
saveuntil=2000;
}
}
… in the changed “proof of concept” onclick_propagation.html Sestet web application you can also try below.
Previous relevant Onclick Event Propagation Event Type Tutorial is shown below.
Onclick Event Propagation Event Type Tutorial
On top of yesterday’s Onclick Event Propagation Event Target Tutorial …
- event.target … theme, today we have a …
- event.type …
… theme, the added bonus being that we finally got to use the word “touchdown“, in all seriousness, in a blog posting’s code logic … yay!!! Yes, as we hadn’t used before (in our memory) but available to use (and today we do) is the idea of …
- a single event Javascript function … that can “multipurpose” itself, even further than the “event.target” helped with this, via …
- event.type recognition of HTML added to as per …
<body onclick="moi(this);" onmouseover="moi(this);" onmouseout="moi(this);" onmousedown="moi(this);" ontouchdown="moi(this);" ontouchstart="moi(this);" ontouchend="moi(this);">
… making itself useful adding optional window.open popup Google search functionality as per …
function commonev(othis) {
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)));
}
}
}
function moi(othis) {
var extras='';
switch ('' + event.type) {
case 'mouseover':
if (document.getElementById('mycbomo').checked && document.getElementById('eventtype').value == ('' + event.type)) {
commonev(othis);
}
break;
case 'mousedown':
if (document.getElementById('mycbomo').checked && document.getElementById('eventtype').value == ('' + event.type)) {
commonev(othis);
}
break;
case 'mouseoout':
if (document.getElementById('mycbomo').checked && document.getElementById('eventtype').value == ('' + event.type)) {
commonev(othis);
}
break;
case 'touchstart':
if (document.getElementById('mycbomo').checked && document.getElementById('eventtype').value == ('' + event.type)) {
commonev(othis);
}
break;
case 'touchdown':
if (document.getElementById('mycbomo').checked && document.getElementById('eventtype').value == ('' + event.type)) {
commonev(othis);
}
break;
case 'touchend':
if (document.getElementById('mycbomo').checked && document.getElementById('eventtype').value == ('' + event.type)) {
commonev(othis);
}
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;
}
}
… in the changed “proof of concept” onclick_propagation.html Sestet web application you can also try below.
Previous relevant Onclick Event Propagation Event Target Tutorial is shown below.
Onclick Event Propagation Event Target Tutorial
Yesterday’s Onclick Event Propagation Primer Tutorial approach to harnessing the “powers of propagation” was a bit “scattergun”. We never referenced the very useful …
… global variable that can be used in Javascript event logic to get the element where the event originated, as distinct from function moi‘s “othis” argument, which points at the HTML webpage element calling the “onclick” event logic.
Its use can add nuance to the reworked “onclick” event sharing Javascript function …
function moi(othis) {
var extras='';
//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);
alert('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);
alert('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++;
}
}
… in the changed “proof of concept” onclick_propagation.html Sestet web application you can also try below.
Previous relevant Onclick Event Propagation Primer Tutorial is shown below.
Onclick Event Propagation Primer Tutorial
A basis for web application event driven programming strategies references …
- element nesting and inheritance …
- the default event propagation up through the element hierarchy
Of course you can ignore how this event “bubbling” 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 “onclick” event (sharing a common …
function moi(othis) {
var extras='';
if (othis.outerHTML.substring(1).split(' ')[0].split('>')[0] == 'details' || (othis.outerHTML.substring(1).split(' ')[0].split('>')[0] == 'body' && blurbsuffix == '') || noway) {
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>';
}
jdc++;
}
}
… event “onclick” logic Javascript function, as above) propagation, the sharing of piecing together the content display of …
Sestet poems and rhymes
… where the six lines of poetry are written out by the “onclick” events of …
- button
- td
- tr
- tbody
- table
- body
… in hierarchical order in the “proof of concept” onclick_propagation.html Sestet web application you can also try below …
If this was interesting you may be interested in this too.
If this was interesting you may be interested in this too.
If this was interesting you may be interested in this too.
If this was interesting you may be interested in this too.
