We Keep Coding

Detect when touch user pulls finger up in JAVASCRIPT

Sorry if this is a repeated question but i couldn't find any aswers.
Basically, I'm developing a web app that has a button in it.
I want that button to highlight in two different scenarios:
-If the user is on a non-touch (desktop) device, the button will highlight if the mouse is on top of it and get back to normal when it's not.
-If the user is on a touch device WITHOUT a mouse, the button will highlight if it's touched and get back to normal when the touching stops.
The desktop part is working fine, but the touch part have a problem: to get the button back to normal, I have to click somewhere else after clicking it, just stop touching the screen doesn't work.
What I'm doing wrong? Thanks!
JS Code:
if (!this.isTouch) {
document.getElementById("search_button").addEventListener("mouseover", function () {
highlightButton();
});
document.getElementById("search_button").addEventListener("mouseout", function() {
restoreButton();
});
}
else if (window.matchMedia("(any-pointer: none)").matches) {
document.getElementById("search_button").addEventListener("touchstart", function () {
highlightButton();
});
document.getElementById("search_button").addEventListener("touchend", function () {
restoreButton();
});
}

There are several touch events listed as well that may be of use for you, this extends touch devices such as tablets and phones:
el.addEventListener("touchstart", handleStart, false);
el.addEventListener("touchend", handleEnd, false);
el.addEventListener("touchcancel", handleCancel, false);
el.addEventListener("touchmove", handleMove, false);
read more at MDN docs

Try to combine also touchcancel event :
addEventListener( "touchcancel", function ( event ) {
console.log( "BREAK" );
restoreButton();
}, false );

Cordova Back button Action listener not working

I have an application running Cordova version 10 and I'm trying to override the back button action listener to exit the application and for which I have done the following :
document.addEventListener("backbutton", onBackKeyDown, false);
function onBackKeyDown(event) {
e.preventDefault();
navigator.app.exitApp();
}
But it is still continuing to perform the default back button action.
Any insight is much appreciated.

function onBackKeyDown(event) {
event.preventDefault();
navigator.app.exitApp();
}
You misspelled event (vs e.preventDefault)

Force Firefox & Edge to reload page if URL has a hash value

Is there any way to force such browsers as FF and Edge to reload page if URL has a hash value and a user press Enter button in the address bar (like Chrome do)?
Or maybe we could handle some JS events in this case?
P.S. I can't use load hashchange events because if the user press Enter button twice - hashchange event will not triggers.
P.S.S. Figured out that popstate is the event that works well for MS Edge in such situations.

You could try to listen the Keydown event, if click the enter button, using the window.location.hash to check whether the url has a hash value, then using the location.reload() method to reload the web page.
code as below:
window.addEventListener('hashchange', function () {
console.log('The hash has changed!')
}, false);
window.addEventListener("keydown", function (e) {
if (e.keyCode == "13") {
if (window.location.hash) {
// Fragment exists
alert("hashed");
location.reload();
} else {
// Fragment doesn't exist
alert("not exist");
}
}
}, false);

Capture all click events and discard unallowed

I develop a web GUI for a special tablet. This tablet is running with Linux and the used browser is Chromium. The application is a web application with PHP, HTML5, JQuery and JavaScript. Now I run into a problem. The screen is a touchscreen and the user is able to navigate through the application by touch the screen. However now we decided to add a feature for saving electricity. This feature will shutdown the background light after three minutes. To turn on the backlight again, the user should touch the screen again. This leads to this problem, because on any touch the buttons are also pressed even if the background light is shutdown. I want to prevent this by discarding all clicks on the touchscreen if a cookie is set. If this cookie is not set the touchscreen and the application should work as desired. How can I solve this problem?
I installed an event listener to register all clicks and to reset the time.
window.addEventListener('mousedown', function(e){
$.get('php/timeupdate.php', function(){});
}, false);
Code used to stop the execution:
$(document).on('click', function(event) {
$.get('php/getwakeup.php', function(e){
if(e==='true'){
//event.preventDefault(); // I tried all three possibilities
//event.stopImmediatePropagation();
event.stopPropagation();
}
});
});

You can try this:
$(document).on('click', function(event) {
// get your cookie
if( cookie is set ) {
event.stopPropagation();
}
});
event.stopPropagation(); stops every event handling from where you called it =)
EDIT:
You have to set your $.get call synchronous or do it completely diffrent. Take a look at the jQuery.Ajax documenation. There is a parameter called "async".
But be careful unless the call is ready nothing else will be executed on you page! So if your script doesn't answer nothing else will work on your site.
The better solution would be setting ja recurring call that will get the information you need. Set it to every two seconds (setInterval is your friend here). If your response is true than set a global variable that you can check in your onDocumentClick event.
window.isBacklightOff = false;
setInterval(function() {
$.get('php/timeupdate.php', function(e) { window.isBacklightOff = !!e; })
}, 2000);
$(document).on('click', function(event) {
// get your cookie
if( window.isBacklightOff === true ) {
event.stopPropagation();
}
});

When the back light goes off you can set some flag handleEvents=false;
So when the flag is on don't handle any events.
Now when the back light is on you can set handleEvents = true.
$(document).on('click', function(event) {
// get your flag say handleEvents
if( !handleEvents ) {
event.stopImmediatePropagation();
return;
} else {
//do your biz logic send ajax..etc
}
});
Reason why your code above is not working:
$(document).on('click', function(event) {
$.get('php/getwakeup.php', function(e){
if(e==='true'){
//event.preventDefault(); // I tried all three possibilities
//event.stopImmediatePropagation();
event.stopPropagation();
}
});
});
The function inside $.get is async and called on success in that you are setting the event to stop propagating...well by that time when the success function is called the event is already complete and has called all the listeners.
So in short you must not do the event stop propagation inside the success function.

Calling Default Phonegap Back Button Handler

I have a phonegap app that requires I capture the back button. This works swimmingly but when I am at the main screen and the back button is pressed I want to call the original event handler and let the app close or do whatever comes naturally to the platform with such a press. I know I can tell the app to quit but understand this is bad form for iPhone apps.
No matter what I try (and I have tried many things) I cannot get the original handler to fire. Any advice?
In my code I have a switch statement inside my backbutton event handler that directs the app as needed to the effect of:
switch blahBlah
{
case 'this' :
doThis() ;
break;
case 'main' :
// What do I do here that is well behaved for all platforms???
break;
default:
doFoo() ;
}

Detect whenever you land on the main screen and remove your custom event handler.
document.removeEventListener( "backbutton", function(){}, false );
and add the event listener on the other pages (or sections).
document.addEventListener( "backbutton", OverrideBackButton, false );
Hope that helps.

This is what I've used and it seems to work fine for my needs
function pageinit() {
document.addEventListener("deviceready", deviceInfo, true);
}
function deviceInfo() {
document.addEventListener("backbutton", onBackButton, true);
}
function onBackButton(e) {
try{
var activePage = $.mobile.activePage.attr('id');
if(activePage == 'Options'){
closeOptions();
} else if(activePage == 'Popup'){
closePopup();
} else if(activePage == 'HomePage'){
function checkButtonSelection(iValue){
if (iValue == 2){
navigator.app.exitApp();
}
}
e.preventDefault();
navigator.notification.confirm(
"Are you sure you want to EXIT the program?",
checkButtonSelection,
'EXIT APP:',
'Cancel,OK');
} else {
navigator.app.backHistory();
}
} catch(e){ console.log('Exception: '+e,3); }
}
Hope this helps...

Cordova 7.x, at least on Android, doesn't seem to properly update the override state. As a consequence, #SHANK's answer doesn't work anymore.
As a workaround, you can disable back button overriding manually, resulting in default behavior:
navigator.app.overrideBackbutton(false);
To re-active custom handling, analogously do:
navigator.app.overrideBackbutton(true);
I filed a bug report on Apache's issue tracker regarding this.