cordova/phonegap onclick doesn't work

Question

I try to create button which starts an alert after a click event. Something like that :

    
    

        
Apache          


        
                      

              相关标签:
       
      

Answer 1

The solution is quite simple, actually. All elements, that you would like to have the click event working on, should have the CSS rule "cursor: pointer;"

You can find a working example here: https://haensel.pro/apache-cordova/apache-cordova-ios-click-event-not-working-quick-how-to

Answer 2

You can try to do the following:

$("#boutonAlerte").on('click', function(){ 
 alert("Clicked!");
});

Then remove the onclick from your button tag and make sure that you included the jQuery library in your HTML o course.

If you want to use JavaScript only you should do :

<button onclick="myFunction();" id="boutonAlerte">Alerte</button>

<script> 
  function myFunction(){
   alert("clicked!");
  }
</script>

Answer 3

onclick is not fired on cordova apps, because users don't "click", instead, they "tap". You may use a decent mobile framework like Ionic, and use ng-click, it automatically solves the problem for you, because it includes ngTouch.

If you prefer not to use a big framework like angular, you may use Zepto.js, and use $(".element").on('tap', callback); to listen for tap events. Or $(".element").on('tap click', callback); to listen for both tap and click events.

Chrome dev tools has good mobile emulation, to trigger tap events. It may be helpful if you want to debug you app in Chrome.

Answer 4

Try adding jQuery click event, which are working fine with my cordova apps

<script type="text/javascript" src="https://code.jquery.com/jquery-1.12.3.js"></script>

<script type="text/javascript">
   $("#boutonAlerte").click(function(){
       alert("ceci est une alerte");
   });
</script>

Here is JSFiddle link

https://jsfiddle.net/9v85ku5y/

Answer 5

Solution

// Function to change the content of t2

function modifyText() {
  var t2 = document.getElementById("t2");
  if (t2.firstChild.nodeValue == "three") {
    t2.firstChild.nodeValue = "two";
  } else {
    t2.firstChild.nodeValue = "three";
  }
}

// add event listener to table

var el = document.getElementById("outside");
el.addEventListener("click", modifyText, false);

Answer 6

Define a clickhandler that you can use later on:

var clickHandler = ('ontouchstart' in document.documentElement ? "touchstart" : "click");

$("a").bind(clickHandler, function(e) {
    alert("clicked or tapped. This button used: " + clickHandler);
});

This will trigger click on non-touch devices and touchstart on touch devices.

When that is said, I will strongly recommend using Fast click instead, and use regular click-events. With the above solution, you will trigger "touchstart" on links when you swipe on it to scroll the page for instance - which is not ideal.