Question

我正在开发一个在版本较高的设备上完美运行的项目 - 我已经在4.1.2版本中检查了它。

问题是它在Android 2.2.1和2.3.5版本的设备中无效。

我有六张图片，我添加了功能。 2个图像的功能是使用id值调用不同的HTML页面。其他四个图像的功能也相同，但图像将根据数据库值显示。

2张图片的功能是调用带有id值的其他HTML页面。

这就是我编码的方式..

<div id="header " class="header ">
     <div id="header_title" class="header_title"> </div>
     <div id="abc" class="abc"><img src="img/abc.png" onClick="abc()"/></div>
-----so -on

我已将abc函数声明为

function abc(){
   window.location.href="index.html";
}

其他四张图片的功能也相同，但图片会根据数据库值显示。

if(value_in_db==0) {
  document.getElementById("xyz").innerHTML = '<img src="img/inactive.png" />'
} else {
  document.getElementById("xyz").innerHTML = '<img src="img/active.png" onclick="xyz()"/> '
}

我已将xyz函数声明为

function xyz(){
   window.location.href="basic.html";
}

面临问题：

onclick功能在Android版本2.2.1和2.3.5中偶尔运行一次。当继续尝试突然点击该函数被调用时。我已经尝试修复此错误将近2天。

我遇到了类似CSS问题的问题：修复了。在较低版本的android中不支持这种情况。我建议使用解决方案here。

我尝试过addEventListener function这对我不起作用。

我希望我能解决这个问题。

请帮我解决这个问题并指导我！

编辑：1 touchevent和deviceready

document.addEventListener("deviceready", onDeviceReady, false);
document.addEventListener( "touchstart", function(e){ onStart(e); }, false );
function onStart ( touchEvent ) 
{
   if( navigator.userAgent.match(/Android/i) ) 
   {
        touchEvent.preventDefault();
   }
}

这适用于较高端版本，但不适用于低端版本。我知道提及2 document.addEventListener是毫无根据的..因为它在较高版本中有效。我继续说道。

Answer 1

这是非常基本的功能，应该适用于所有版本的Android - 您确定代码中的其他内容不会导致问题吗？

我在运行Android 2.3.4的HTC HD2上使用最新的Cordova 2.8.0尝试了这个测试用例，并且它一直很好用：

<!DOCTYPE html>
<html>
    <head>     
        <meta charset="utf-8">
        <script type="text/javascript" charset="utf-8" src="cordova.js"></script>
        <script type="text/javascript">
            function abc(){
               window.location.href="foo.html";
            }
        </script>
    </head>
    <body>
         <h1>Index page</h1>
         <div id="abc" class="abc"><img src="img/abc.jpg" onClick="abc()"/></div>
    </body>
</html>

您可以下载我的Eclipse测试项目并编译APK here并在您的设备上试用。

根据您的JSFiddle代码进行更新：

您的HTML包含多个语法错误 - 其中一个可能导致Android 2.x出现问题，而4.x可能更容错：

1）#header id属性包含尾随空格。取代

<div id="header " class="header "> 同 <div id="header" class="header">

2）应引用属性值。将<img name="slide" src="img/abc.jpg" width=100%; />替换为<img name="slide" src="img/abc.jpg" width="100%" />

3）你有一个额外的结束div标签。取代

<div id="footer"  class="footer">
    <div id="footer_text" style="color:#ffffff">footer</div>
    </div>
</div>

与

<div id="footer"  class="footer">
    <div id="footer_text" style="color:#ffffff">footer</div>
</div>

Answer 2

您无法在页面上使用所有活动。

如果你附上了mousedown，mouseup，click，touchstart等。有很多   组合。
  我建议：    - 实现设备/浏览器检测器    - 然后附加移动触摸和桌面点击事件

您可以使用组合，但使用所有点击，只需一个触摸变体或所有触摸和一个经典的桌面活动。

最佳组合：onClick，只有一个mousedown或mouseup。然后实现如果您遇到某些功能问题，请触摸一些事件。

你也可以输入这样的简单代码：

<div onClick="CALL();" ontouchstart="CALL();" >

您可以在此答案中找到我的检测浏览器/设备脚本： Similar question-answer

Answer 3

您只需选择虚拟鼠标（vmouse）绑定即可下载Custom Jquery Mobile Download。

在您的代码中包含此生成的javascript并使用代码段。

$(document).on('vclick', '.popmenu', function(event){
// DO stuff
});

点击事件现在将使用class='popmenu'

在预加载和动态内容的桌面/移动版本上运行

如何在javascript和html中为具有较低版本android的设备实现onclick？

3 个答案: