{"id":58795,"date":"2023-03-29T03:01:05","date_gmt":"2023-03-28T17:01:05","guid":{"rendered":"http:\/\/www.rjmprogramming.com.au\/ITblog\/?p=58795"},"modified":"2023-03-29T14:13:39","modified_gmt":"2023-03-29T04:13:39","slug":"onclick-event-propagation-event-nuance-tutorial","status":"publish","type":"post","link":"https:\/\/www.rjmprogramming.com.au\/ITblog\/onclick-event-propagation-event-nuance-tutorial\/","title":{"rendered":"Onclick Event Propagation Event Nuance Tutorial"},"content":{"rendered":"
\"Onclick<\/a>

Onclick Event Propagation Event Nuance Tutorial<\/p><\/div>\n

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<\/a>.<\/p>\n

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<\/font> …<\/p>\n


\n function ttlook() {
\n var tspecific=' pinch';
\n if (wasscale > isscale) {
\n tspecific=' Pinch';
\n } else if (isscale > wasscale) {
\n tspecific=' Spread';
\n } else if (eval('' + ote.split(':').length) >= 5) {
\n if (eval(ote.split(':')[1].split(',')[0].trim()) > eval(ote.split(':')[3].split(',')[0].trim())) {
\n if (eval(ote.split(':')[1].split(',')[1].split(' ')[0].trim()) <= eval(ote.split(':')[3].split(',')[1].split(' ')[0].trim())) {
\n tspecific=' spread';
\n }
\n } else if (eval(ote.split(':')[1].split(',')[0].trim()) < eval(ote.split(':')[3].split(',')[0].trim())) {
\n if (eval(ote.split(':')[1].split(',')[1].split(' ')[0].trim()) >= 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

\n function assesslater() {
\n saveuntil-=100;
\n if (saveuntil > 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<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><\/p>\n

… in the changed<\/a> “proof of concept” onclick_propagation.html<\/a> Sestet web application<\/a> you can also try below<\/a>.<\/p>\n

\n

\n

Previous relevant Onclick Event Propagation Event Type Tutorial<\/a> is shown below.<\/p>\n

\"Onclick<\/a>

Onclick Event Propagation Event Type Tutorial<\/p><\/div>\n

On top of yesterday’s Onclick Event Propagation Event Target Tutorial<\/a> …<\/p>\n