Cordova/Phonegap OnClick 不起作用

cordova/phonegap onclick doesn't work

本文关键字：不起作用 OnClick Phonegap Cordova      更新时间：2023-09-26

我尝试创建按钮，该按钮在单击事件后启动警报。像这样： 

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

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

function onAlertClick() {
  alert("ceci est une alerte");
}
alert("test2");
var bA = document.getElementById("boutonAlerte");
bA.addEventListener("onclick", onAlertClick());

但这是一回事。

有什么想法吗？

尝试添加 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/

解决方案

更改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);

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

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

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

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

以下是使用此技巧的一些示例：

function clickEvent(element, callback){
    element.setAttribute("style", "cursor: pointer;");
    element.addEventListener("click", callback);
}
clickEvent(document.getElementById("mybutton"), function(){
    alert("Clicked");
});

通过使用"clickEvent"功能，您可以使"click"工作

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

var clickHandler = ('ontouchstart' in document.documentElement ? "touchstart" : "click");
$("a").bind(clickHandler, function(e) {
    alert("clicked or tapped. This button used: " + clickHandler);
});

这将触发非触摸设备上的点击和触摸设备上的触摸启动。

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

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

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

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

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

<button onclick="myFunction();" id="boutonAlerte">Alerte</button>
<script> 
  function myFunction(){
   alert("clicked!");
  }
</script>

下面是一个 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。在这种情况下，这将重新加载科尔多瓦应用程序。

实际上，解决方案非常简单。您希望让单击事件处理的所有元素都应具有 CSS 规则"cursor： 指针;"

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

相关文章：