11

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');.

Marco Disce
  • 234
  • 2
  • 13
  • 1
    Have you tried [`stopPropogation`](https://developer.mozilla.org/en-US/docs/Web/API/event.stopPropagation) and [`preventdefault`](https://developer.mozilla.org/en-US/docs/Web/API/event.preventDefault)? – Seth Battin Jul 04 '13 at 17:20
  • `preventdefault` isn't likely to work because you can see it at work [here](http://www.w3schools.com/jquery/tryit.asp?filename=tryjquery_event_preventdefault) and you can check that the visual and sound click effects actually occur anyways. – Marco Disce Jul 04 '13 at 18:04
  • I'm not sure that I have to stop the propagation of an event here because the undesired click event happens as a single event, not as the propagation of another one. – Marco Disce Jul 04 '13 at 18:11
  • 1
    How about using the css[pointer-events="none"](https://developer.mozilla.org/en-US/docs/Web/CSS/pointer-events)? Browser support may be dubious. Your question is really not gamedev related; I'm going to flag it to be migrated to a different stackexchange. You are likely to get more confident answers there. – Seth Battin Jul 04 '13 at 18:28
  • In that case they should probably be merged. – Seth Battin Jul 05 '13 at 19:02
  • If you open the tutorial page up on your phone (http://www.html5canvastutorials.com/kineticjs/html5-canvas-drag-and-drop-events-tutorial/) are you able to reproduce the problem? I tried on my S3 using Chrome and couldn't get the Stage to highlight + click sound. – projeqht Jul 09 '13 at 20:26
  • @projeqht The problem is not present on my browsers, it happens only with the app compiled by phonegap build. – Marco Disce Jul 09 '13 at 20:59

2 Answers2

3

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

projeqht
  • 3,160
  • 3
  • 18
  • 32
  • Tried both, didn't solve any problem. Preventdefault actually prevent only the action that is triggered by a click, not the "clickability" (see for example how it behaves [here](http://www.w3schools.com/jquery/tryit.asp?filename=tryjquery_event_preventdefault) ) – Marco Disce Jul 04 '13 at 20:48
  • Oh.. Hmm how about stage.on('tap', function() {return false;}) ? Sorry, it's not as easy to test for me since I don't have phonegap set up to test builds for you :p – projeqht Jul 04 '13 at 20:53
  • Tried now, doesn't work either... thank you, I don't mind if you didn't test, I'm just looking for suggestions. – Marco Disce Jul 04 '13 at 21:04
  • Added the webkit properties in the css to canvas but didn't help. – Marco Disce Jul 06 '13 at 14:04
  • Tried webkit options also to body, texts and imgs: still everything clickable. – Marco Disce Jul 10 '13 at 08:31
  • 1
    That's really strange because I did some digging around and found that the above answer should fix things for most cases that I've seen. Possibly must be something to do with a phonegap build? The only "different" answer that I came across was this one: http://stackoverflow.com/questions/9815518/wp7-html5-how-to-prevent-a-canvas-from-being-selected-highlighted BUT the answerer modified quite an old version of KineticJS to get his results. Still, I looked in the new KineticJS library and didn't find anything like it, so maybe you can give it a try and see if it helps? – projeqht Jul 10 '13 at 13:09
  • 2
    Actually it seems I have fixed the highlight problem with `* {-webkit-tap-highlight-color: rgba(0, 0, 0, 0);}`. That's great but the click sound is still there... – Marco Disce Jul 11 '13 at 15:42
  • I wonder if you could replace the default sound with an empty one by using Cordova's Media.play() function: http://cordova.apache.org/docs/en/2.4.0/cordova_media_media.md.html#media.play and call that function onclick for the body,canvas,container or whatever needs to be disabled. – projeqht Jul 11 '13 at 17:53
  • Wait, would this apply to every click? I don't want to lose the sound for the "ordinary" click events. – Marco Disce Jul 11 '13 at 18:00
  • I would assume that it would disable the sound for any click inside the container you call it on, if it works. But say if you call an empty sound with media.play() onclick for the , would you need to have any click sounds on the Canvas anyways? Just wondering. – projeqht Jul 11 '13 at 18:02
  • Ok but I would point out that those solutions for hiding the highlight and the sound are surely not optimal: we are just trying to hide the effect of a an unwanted process (the listening of a touch event and the triggering of functions) which we would like to avoid in the first place. If the program is listening for such irrelevant touch events and running functions there could be lags or maybe missing listening of other events. – Marco Disce Jul 12 '13 at 07:47
  • Yeah you're right, that alternative would definitely not be optimal. But the 'click' sound is browser/OS specific, and so I think we're depending on Cordova (or Javascript) to have a solution to disabling this sound, which it looks like there might not be at the moment. In Android, there is a way to prevent/disable sound: http://developer.android.com/reference/android/view/View.html#attr_android:soundEffectsEnabled, but you're using Cordova/Javascript so I don't think you can use this method. Maybe another approach would be to bring this issue up to the developer's of Cordova's attention. – projeqht Jul 15 '13 at 20:11
0

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.

Robin C Samuel
  • 1,215
  • 15
  • 33
  • Hi, I tried to add your css and to apply the class "notclickable" to some elements. If I apply the class to the body or the container of the stage then I can't drag/drop the box anymore and actually I can produce the output click sound tapping it (althought there is no highlight). If I apply it to a text on the body then when I tap the text a click event occurr! The text is highlighted and the sound is produced. Notice that before applying the class tapping the text produced the highlight on the whole document body. – Marco Disce Jul 08 '13 at 15:26