admin管理员组

文章数量:1414614

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 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.

  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=".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:

  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 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.

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

  • javascript
  • android
  • jquery
  • mobile
  • cordova
Share Improve this question edited Jul 10, 2013 at 6:30 munity wiki
17 revs
Marco 7
  • 1 Have you tried stopPropogation and preventdefault? – Seth Battin Commented Jul 4, 2013 at 17:20
  • preventdefault isn'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
 |  Show 2 more ments

2 Answers 2

Reset to default 3 +50

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./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.

本文标签： javascriptHow to prevent click events on the document body (maybe a bug in Cordova)Stack Overflow

版权声明：本文标题：javascript - How to prevent click events on the document body (maybe a bug in Cordova?) - Stack Overflow 内容由网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：http://www.betaflare.com/web/1745187372a2646747.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。