如何在javascript和html中实现android低版本设备的onclick

How to implement onclick in javascript and html for devices with lower versions of android?

本文关键字：版本 onclick android 实现 javascript html      更新时间：2023-09-26

我正在研究一个在更高版本的设备上完美工作的项目-我已经在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";
}

问题:

在android 2.2.1和2.3.5版本中，onclick功能偶尔会起作用。当不断尝试点击突然函数被调用。我已经试着修复这个错误将近2天了。

我也遇到过类似的CSS位置问题:fixed。这在较低版本的android中不支持。有人给了我一个解决办法。

我已经尝试了这个addEventListener函数，它不适合我。

我希望我能找到解决这个问题的方法。

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

EDIT:1 touchevent and 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();
   }
}

这在高端版本中有效，但在低端版本中无效。我知道提到document.addEventListener是毫无根据的…就像在更高的版本中一样。

这是非常基本的功能，应该在所有版本的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，并在你的设备上试用。

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

你不能在页面上使用所有的事件。

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

  • 您可以使用组合，但使用所有点击和触摸变体OR所有触摸和一个经典桌面事件。

最佳组合:onClick和只有一个鼠标向下或鼠标向上。然后实现一些触摸事件，如果你有问题的某些功能。

你也可以像这样写简单的代码:

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

你可以在这个答案中找到我的检测浏览器/设备脚本:类似问答

选择虚拟鼠标(vmouse)绑定可以下载自定义Jquery移动下载

在你的代码中包含这个生成的javascript并使用代码片段

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

点击事件现在将工作在桌面/移动版本的预加载和动态内容与class='popmenu'

相关文章：