Home » Android » javascript – How to prevent click events on the document body (maybe a bug in Cordova?)

javascript – How to prevent click events on the document body (maybe a bug in Cordova?)

Posted by: admin May 14, 2020 Leave a comment

Questions:

I’m a beginner trying to develop a mobile phone game with with Kinetic Js and “phonegap build”. I am experiencing a problem which I don’t know how to address.
I made some tests:

  1. I just pasted this code here into my index.html and sent the code to the phonegap build which created the apk file from the html code.
    The app works quite fine but if you play a little bit you may see an undesired behavior: the entire “stage” can be clicked with a touch and when it happens (it’s actually not easy to do it on purpose, but it happens) you hear the standard click sound of the android OS and you see the entire area highlighted for a second. Just like if you were in a browser and you clicked on a link.

  2. I compiled (with phonegap build) the compass simulator linked here, it works but when you tap the pic of the compass you trigger the click sound. This is an undesired effect which is not present if you run it on a browser/emulator.

  3. I just put some png image in the body avoiding canvas and KineticJs. I also didn’t add any script. In this case there is no click event when you tap. But If I add

    <script src="http://code.jquery.com/jquery-1.8.2.min.js"></script>
    <script src="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.js"></script>
    

    (even without adding any script) then again tap can produce the click event. If I remove anyone of the two lines then the click event disappear. Also if I add

    <script src="http://d3lp1msu2r81bx.cloudfront.net/kjs/js/lib/kinetic-v4.5.4.min.js"></script>
    

    again the body is clickable producing highlights and click sound. (I’m still speaking about the compiled app with phonegap build).

I tried replacing <body> with <body onmousedown="return false;"> but didn’t help. I also tried with $("#object").click( function () {return false;}) with the div element of the canvas, the pic and the body, didn’t help either. I looked for advises to make anchors not clickable to see if they could be applied but I didn’t find anything useful.

Any suggestion?

Update: Another try which didn’t solve is: stage.off('tap click mousedown touchstart touchend dbltap');.

How to&Answers:

Have you tried this?

stage.on('tap touchstart touchend', function() {
  return false;
});

This might help too:

canvas {
  /*-webkit-tap-highlight-color: transparent; Some users reported this worked for them, although rgba(0,0,0,0); worked for the asker*/
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  outline: none;
}

Here is a quick link on webkit-touch-callout, I’m not sure if it will help your situation… http://phonegap-tips.com/articles/essential-phonegap-css-webkit-touch-callout.html

EDIT: It appears the author of phone gap suggests -webkit-tap-highlight-color: rgba(0, 0, 0, 0); to prevent link selection. Source here: https://github.com/phonegap/phonegap-start/blob/master/www/css/index.css

Answer:

To disable clicking on anchor tag, you may simply use some css tricks, for example, you hav an anchor tag with class ‘notclickable’, then add css,

.notclickable {
    pointer-events: none;
    cursor: default;
    opacity:0.7;
}

Now you can make an anchor tag disabled by adding this class

or you may try this to prevent a click,

$('.notclickable').live('click', function(event){
    event.preventDefault();
});

Hope this helps.