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:
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.
I piled (with phonegap build) the pass simulator linked here, it works but when you tap the pic of the pass you trigger the click sound. This is an undesired effect which is not present if you run it on a browser/emulator.
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=".8.2.min.js"></script> <script src=".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=".5.4.min.js"></script>again the body is clickable producing highlights and click sound. (I'm still speaking about the piled 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');.
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:
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.
I piled (with phonegap build) the pass simulator linked here, it works but when you tap the pic of the pass you trigger the click sound. This is an undesired effect which is not present if you run it on a browser/emulator.
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./jquery-1.8.2.min.js"></script> <script src="http://code.jquery./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/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 piled 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');.
17 revs
Marco 7
-
1
Have you tried
stopPropogationandpreventdefault? – Seth Battin Commented Jul 4, 2013 at 17:20 -
preventdefaultisn't likely to work because you can see it at work here and you can check that the visual and sound click effects actually occur anyways. – Marco Disce Commented Jul 4, 2013 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 Commented Jul 4, 2013 at 18:11
- 1 How about using the csspointer-events="none"? 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 Commented Jul 4, 2013 at 18:28
- In that case they should probably be merged. – Seth Battin Commented Jul 5, 2013 at 19:02
2 Answers
Reset to default 3 +50Have 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./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./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.