首页 > 解决方案 > 如何使用 javascript 重新着色 Cordova 中的按钮

问题描述

我尝试创建在单击时重新着色的按钮。我的代码如下所示:

function foo(){
    var docFrag = document.createDocumentFragment();
    for (var i = 0; i < 4; i++) {
        var btn = document.createElement("button");
        btn.innerText = i;
        btn.id = "testbutton" + i;
        (function(btnID){
            btn.addEventListener("mousedown", function() {
                document.getElementById(btnID).style.backgroundColor = "red";
        })})(btn.id);
        (function(){
            btn.addEventListener("mouseup", function() {
                doSomethingElse();
        })})();
        docFrag.appendChild(btn);
    }
    document.getElementById("buttonContainer").appendChild(docFrag);
}

它确实在我的浏览器中工作,但是当我将代码部署到模拟器时,它只是跳过着色部分或根本不做。我使用“mousedown”的原因是我希望按钮在“mouseup”上做其他事情。我之前尝试过在“点击”时同时进行重新着色和其他功能,但它会完全跳过重新着色,因为新功能会覆盖以前的工作。

标签: javascripthtmlcordova

解决方案


在移动设备上没有鼠标,所以“mousedown”事件不存在。

我想你应该改用“touchstart”和“touchend”。

=> https://developer.mozilla.org/en-US/docs/Web/API/TouchEvent


推荐阅读