Capture all click events and discard unallowed

Question

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();
        }
    });
});

Answer 1

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();
    }
});

Answer 2

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.