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

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. What is the equivalent to a JavaScript setInterval/setTimeout in Android/Java?
  3. How can I change the OverScroll color in Android 2.3.1?
  4. Write enum with String to parcel
  5. EditText setError() with no message just the icon
  6. Android create folders in Internal Memory
  7. Web Server for Android
  8. 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.

  9. 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 show soft-keyboard when edittext is focused
  • Zipalign - Command not found - MAC terminal
  • Finding app version number in code
  • How to show only message from log (hide time ,pid etc.) in Android Studio
  • Integrate an Android app (.apk) into an existing Android project
  • Android Studio 0.5.2 Gradle Refresh Project failed
  • 2 Solutions collect form web for “How to prevent click events on the document body (maybe a bug in Cordova?)”

    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

    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.

    Android Babe is a Google Android Fan, All about Android Phones, Android Wear, Android Dev and Android Games Apps and so on.