cordova/phonegap onclick doesn't work
Question
I try to create button which starts an alert after a click event. Something like that :
<body>
<div class="app">
<h1>Apache Cordova</h1>
<div id="deviceready" class="blink">
<p class="event listening">Connecting to Device</p>
<p class="event received">Device is Ready</p>
</div>
<button onclick="alert('salut')" id="boutonAlerte">Alerte</button>
</div>
<script type="text/javascript" src="cordova.js"></script>
<script type="text/javascript" src="js/index.js"></script> </body>
but the problem is that my onclick doesn't work. A lot of people tell me to try it on javascript so I've decided to write something like that :
function onAlertClick() {
alert("ceci est une alerte");
}
alert("test2");
var bA = document.getElementById("boutonAlerte");
bA.addEventListener("onclick", onAlertClick());
But this is the same thing.
Any ideas ?
8 answers
solution1
2 ACCPTED 2016-04-25 12:23:31
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
solution2
2 2017-05-24 15:55:15
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);
solution3
1 2016-04-25 03:22:13
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.
solution4
1 2021-08-06 20:01:21
I hear about a click to make "click" event to work. The trick is adding the css cursor property to "pointer" in that way, when the user tap triggers the click event.
Here is some example using this trick:
function clickEvent(element, callback){
element.setAttribute("style", "cursor: pointer;");
element.addEventListener("click", callback);
}
clickEvent(document.getElementById("mybutton"), function(){
alert("Clicked");
});
By using the function "clickEvent" you can get the "click" to work
solution5
0 2016-04-25 05:16:58
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.
solution6
0 2016-04-25 12:31:00
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>
solution7
0 2018-08-15 08:52:26
Here is a jQuery example
html
<a href="#" class="start-button">EXECUTE</a>
jquery
$(".start-button").click(function (e) { //note that 'onclick="HandleExec();return false;" doesnt work
e.preventDefault();
// here you can handle the click code you wanted
});
make sure that you call event.preventDefault(); so it doesn't try to go to the href in the html tag. That will just reload the cordova app in this case.
solution8
0 2018-08-16 09:44:31
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
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.