Jquery/JavaScript OnClick 事件未在移动设备上触发
Jquery/JavaScript OnClick event not firing on Mobile Devices
我目前正在使用PhoneGap的Cordova库创建一个应用程序。现在,在Chrome上测试代码时,一切正常,但是当我将其部署到Android时,除按钮之外的所有内容上的所有onclick事件都停止工作。
在下面的代码中,您将看到我使用 Jquery 添加事件侦听器的代码。
我不知道为什么它不在我的 Nexus 上触发点击事件。我已经彻底搜索了类似的问题,但没有一个提供有效的答案。
类似的问题:在移动设备上单击不起作用(触摸)--jQuery onclick在移动设备上不起作用 --Android/Phonegap - onClick() 不起作用
这只是索引中的一个部分.html
<html>
<head>
<!--<link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.0/jquery.mobile.structure-1.4.0.min.css" />
<script src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
<script src="http://code.jquery.com/mobile/1.4.0/jquery.mobile-1.4.0.min.js"></script>
-->
<meta name="viewport" content="width=device-width, initial-scale=1">
<script type="text/javascript" charset="utf-8" src="cordova.js"></script>
<script type="text/javascript" src="script/jquery/jquery-1.11.2.min.js"></script>
<link rel="stylesheet" href="script/jquery/jquery.mobile-1.4.5.css"/>
<script type="text/javascript" src="script/jquery/jquery.mobile-1.4.5.js"></script>
<link rel="stylesheet" href="theme/MakeMyOutfit.css">
<link rel="stylesheet" href="theme/MakeMyOutfit.min.css">
<script type="text/javascript" src="script/Datebox/DateBox.js"></script>
<link rel="stylesheet" href="script/DateBox/jqm-datebox-1.4.5.css">
<link rel="stylesheet" href="theme/theme.css">
<script type="text/javascript" src="script/menu.js"></script>
<script type="text/javascript" src="script/lockscreen.js"></script>
<script type="text/javascript" src="script/wardrobe.js"></script>
<script type="text/javascript" src="script/clothing.js"></script>
<script type="text/javascript" src="script/addUser.js"></script>
<script type="text/javascript" src="script/JsonDb.js"></script>
<script type="text/javascript" src="script/takePicture.js"></script>
<title>Make My Outfit</title>
</head>
<body>
<div data-role="page" id="lockscreen">
<header>
Make My Outfit
</header>
<section id="lockscreen-content" data-role="content" >
<div class="lockscreen-profile">
<div class="lockscreen-profile-top">
<div class="lockscreen-profile-top-picture"></div>
<div class="lockscreen-profile-top-name">X</div>
</div>
<div class="lockscreen-profile-login">
<input type="password" name="password" class="txt password" value="" />
<a href="#" class="btn lockscreen-profile-login-button" data-user-id="1">Aanmelden</a>
</div>
</div>
<div class="lockscreen-profile" >
**<div class="lockscreen-profile-top">**
<div class="lockscreen-profile-top-picture"></div>
<div class="lockscreen-profile-top-name">Y</div>
</div>
<div class="lockscreen-profile-login">
<input type="password" name="password" class="txt password" value="" />
<a href="#" class="btn lockscreen-profile-login-button" data-user-id="2">Aanmelden</a>
</div>
</div>
<a href="#addUser" id="btnAddUser" class="lockscreen-profile">
<div class="lockscreen-profile-top-picture"></div>
<div class="lockscreen-profile-top-name">Gebruiker toevoegen</div>
</a>
</section>
</div>
</body>
</html>
这是我用于锁屏页面的代码:(锁屏.js)
var selectedUserId;
$( document ).on( "pageinit", "#lockscreen" ,function() {
$(".lockscreen-profile-top").on('touchstart click', function(){
var e = $( this ).parent();
if (!e.hasClass("open"))
{
e.addClass("open");
//$( this ).next().children(".password:first").focus();
}
else
{e.removeClass("open");}
});
/*
BUG: dit event wordt 2 keer gefired
GEVOLG: de selectedUserId wordt onmiddelijk terug op null gezet.
OPLOSSING: event unbinden (.off()) en daarna terug binden
FIXED
*/
$(".lockscreen-profile-login-button").on('touchstart click', function(){
selectedUserId = $(this).attr("data-user-id");
console.log(selectedUserId);
$.mobile.navigate( "#home", {transition: "flow"});
});});
问题出在安卓4.3及更低版本上。
在Android 4.4 +上测试时,我没有这个问题。
进一步调查它发生的原因。
试试这个
$(document).on('click', ".lockscreen-profile-login-button",function () {
selectedUserId = $(this).attr("data-user-id");
console.log(selectedUserId);
$.mobile.navigate( "#home", {transition: "flow"});
});
当您附加事件时,DOM 可能还没有准备好。您是否尝试过在页面底部加载脚本?这可能会解决问题,还可以提高应用程序的性能。
我对Phonegap了解不多,但关于移动设备上的触摸事件,我知道你必须处理几件事:
-
检查元素的 z-index 属性,当您的元素一个在另一个元素中时,可能是触摸事件被容器元素截获。您可以在 css 中将要触摸的元素的 z-index 属性设置为比其他元素高。
-
通过"触摸操作:无;"阻止默认触摸操作 在你的 CSS 中。
如果您使用的是 Chrome,则只需通过 Chrome 桌面版调试您的移动网络应用,并使用工具>检查设备和正在运行的 android adb。
相关文章:
- 如何使用纯javascript的移动触摸事件
- Javascript移动站点重定向问题
- javascript移动交叉浏览器确定用户是否滚动到页面底部
- 使用箭头键移动javascript字符
- 如何使用while循环自动移动javascript中的元素
- 从文件顶部移动javascript代码,可能使用设计模式
- 无法使对象移动.Javascript
- 如何在对象和 DRY 中移动 Javascript 函数
- Grunt usemin 在构建时不会移动 JavaScript 依赖项
- 南非移动Javascript正则表达式
- 基于给定角度的移动(javascript)
- Jquery移动javascript在另一个html上不起作用
- jQuery移动javascript在多个HTML文件上
- 实时移动JavaScript
- 国际象棋中的皇后移动(Javascript)
- 如何正确地从HTML中移动JavaScript事件?(你知道其他方法吗?)
- 从按键检测对角线移动- Javascript
- 如何在Chrome中移动javascript范围的末尾到句子
- jquery移动javascript计算器
- 《太空入侵者》没有同步移动(Javascript)