Jquery/JavaScript OnClick 事件未在移动设备上触发答案

【问题标题】：Jquery/JavaScript OnClick event not firing on Mobile DevicesJquery/JavaScript OnClick 事件未在移动设备上触发
【发布时间】：2015-03-12 11:16:03
【问题描述】：

我目前正在使用 PhoneGap 的 Cordova 库创建一个应用程序。现在，在 Chrome 上测试代码时，一切正常，但是当我将其部署到 Android 时，除按钮之外的所有内容上的所有 onclick 事件都停止工作。

在下面的代码中，您将看到我使用 Jquery 添加了一个事件监听器。

我不知道为什么它不会触发我的 Nexus 上的 onclick 事件。我已经彻底搜索了类似的问题，但没有一个提供有效的答案。

类似问题：onClick not working on mobile (touch)-- jQuery onclick not working on mobile --Android/ Phonegap - onClick() not working

这只是 index.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>

这是我用于锁屏页面的代码：(lockscreen.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"});
});});

【问题讨论】：

在发布到 android 期间是否发生任何可能改变/“破坏”这些路径的事情？
你的意思是脚本之间的链接？其他代码片段在页面上似乎工作得很好，只是 Onclick 以某种方式搞砸了。

标签： javascript android jquery cordova jquery-mobile

【解决方案1】：

问题在于 android 4.3 及更低版本。

在 Android 4.4+ 上测试时，我没有这个问题。

进一步调查它发生的原因。

【讨论】：

Crosswalk 是一个插件，可用于模拟较新的浏览器版本，而不是依赖旧型号的旧版本。安装人行横道解决了我的问题。

【解决方案2】：

试试这个

$(document).on('click', ".lockscreen-profile-login-button",function () {

      selectedUserId = $(this).attr("data-user-id");
      console.log(selectedUserId);
      $.mobile.navigate( "#home", {transition: "flow"});
});

【讨论】：

【解决方案3】：

当您附加事件时，可能 DOM 尚未准备好。您是否尝试过在页面底部加载脚本？这可能会解决问题并提高您的应用程序的性能。

【讨论】：

【解决方案4】：

我对 Phonegap 了解不多，但关于移动设备上的触摸事件，我知道你必须注意几件事：

检查元素的 z-index 属性，当元素一个内一个时，可能是触摸事件被容器元素拦截。您可以在您的 css 中将要触摸的元素的 z-index 属性设置为高于其他元素。
通过“touch-action: none;”阻止默认触摸动作在你的 CSS 中。

如果您使用的是 Chrome，您可以通过桌面版 Chrome 使用工具简单地调试您的移动网络应用>检查设备和运行的 android adb。

【讨论】：