科尔多瓦/phonegap onclick 不起作用答案

【问题标题】：cordova/phonegap onclick doesn't work科尔多瓦/phonegap onclick 不起作用
【发布时间】：2016-08-18 05:05:50
【问题描述】：

我尝试创建在单击事件后启动警报的按钮。类似的东西：

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

但问题是我的 onclick 不起作用。很多人告诉我在 javascript 上尝试一下，所以我决定写这样的东西：

function onAlertClick() {
  alert("ceci est une alerte");
}

alert("test2");

var bA = document.getElementById("boutonAlerte");
bA.addEventListener("onclick", onAlertClick());

但这是一回事。

有什么想法吗？

【问题讨论】：

你试过this
不，因为我不使用 JQuerry，但为什么不呢，我认为 Jquery 可能是一个很好的解决方案
不适用于 touchend 和 jQuerry。可能是因为jQuery版本？（我是最后一个，2.2.3）

标签： javascript android cordova onclick listener

【解决方案1】：

在 cordova 应用程序上不会触发 onclick，因为用户不会“点击”，而是“点击”。你可以使用像 Ionic 这样不错的移动框架，并使用ng-click，它会自动为你解决问题，因为它包含ngTouch。

如果你不想使用像 angular 这样的大框架，你可以使用Zepto.js，并使用$(".element").on('tap', callback); 来监听点击事件。或$(".element").on('tap click', callback); 监听点击和点击事件。

Chrome 开发工具具有良好的移动仿真功能，可以触发点击事件。如果您想在 Chrome 中调试您的应用程序，这可能会有所帮助。

【讨论】：

【解决方案2】：

定义一个稍后可以使用的点击处理程序：

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

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

这将触发非触控设备上的点击和触控设备上的 touchstart。

话虽如此，我强烈建议改用快速点击，并使用常规点击事件。使用上述解决方案，例如，当您在链接上滑动以滚动页面时，您将触发链接上的“touchstart” - 这并不理想。

【讨论】：

感谢您的回答。我今晚试试。是 JQuerry 吗？

【解决方案3】：

尝试添加 jQuery 点击事件，这在我的 Cordova 应用中运行良好

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

这里是 JSFiddle 链接

https://jsfiddle.net/9v85ku5y/

【讨论】：

我已经用最新的 jQuery src 更新了，所以请看看
当我使用$("#boutonAlerte").on("touchend", function() { alert("clicked"); });时，它不适用于最后一个jq版本
谢谢，它可以在网站上运行，我必须在我的 Cordova 应用上试试？
我尝试使用我在此处共享的相同代码制作简单的演示应用程序，并且它与 jQuery Click 事件一起工作正常，因此请尝试创建演示应用程序并让我知道这是否有效。
太好了，如果这适合您的问题和要求，那么您可以选择此作为正确答案，谢谢

【解决方案4】：

您可以尝试执行以下操作：

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

然后从您的按钮标签中删除onclick，并确保在您的 HTML o 课程中包含 jQuery 库。

如果你只想使用 JavaScript，你应该这样做：

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

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

【讨论】：

【解决方案5】：

解决办法

//改变t2内容的函数

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

// 向表中添加事件监听器

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

【讨论】：

【解决方案6】：

这是一个 jQuery 示例

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
});

确保调用 event.preventDefault();所以它不会尝试去html标签中的href。在这种情况下，这只会重新加载 cordova 应用程序。

【讨论】：

【解决方案7】：

实际上，解决方案非常简单。您希望点击事件处理的所有元素都应具有 CSS 规则“光标：指针；”

您可以在此处找到一个工作示例： https://haensel.pro/apache-cordova/apache-cordova-ios-click-event-not-working-quick-how-to

【讨论】：

【解决方案8】：

我听说单击以使“单击”事件起作用。诀窍是当用户点击触发点击事件时，以这种方式将 css 光标属性添加到“指针”。

这里有一些使用这个技巧的例子：

function clickEvent(element, callback){
    element.setAttribute("style", "cursor: pointer;");
    element.addEventListener("click", callback);
}

clickEvent(document.getElementById("mybutton"), function(){
    alert("Clicked");
});

通过使用“clickEvent”功能，您可以让“点击”工作

【讨论】：