覆盖 PhoneGap Android 中的后退按钮

我试图完成多个 addEventListener，但出了什么问题？

例如，如果页面上有 3 个 div，第一个显示在开头，其他两个隐藏。

<div id="d1">
<a onClick="
document.addEventListener("backbutton", show_div1, false); 
$('#d1').hide();  
$('#d2').show(); 
"
</a>
</div>

<div id="d2"></div> - initially hidden
<div id="d3"></div> - initially hidden

它显示 div 2，隐藏 div 1 并将后退按钮的侦听器设置为 show_div1()，一切正常。按下返回键会发出警报“我应该显示#div1”， 正如它应该(//$('#d1').show(); 已注释）

show_div1(){
//$('#d1').show(); $('#d2').hide(); 
alert ('I should show #div1');
}

但现在问题来了

<div id="d2">
<a onClick="
document.removeEventListener("backbutton", show_div1, false);
document.addEventListener("backbutton", show_div2, false); 
$('#d2').hide();  
$('#d3').show(); 
"
</a>
</div>

它立即触发“我应该显示#div2”甚至没有按下后退按钮！addEventListener 就像启动主函数 show_div2() 而不仅仅是在后退按钮上设置侦听器到该函数。

show_div2(){
//$('#d2').show(); $('#d3').hide();
alert ('I should show #div2');
}

发生这种情况的可能原因是什么？

尝试这个， 在设备准备就绪时，为后退按钮添加一个侦听器，如下所示

var onBackButton = function(){show_div2();}; //the initial state
document.addEventListener("backbutton", onBackButton, false); 

And

不要将 onClick 与phoneGap一起使用

使用 href 或 ontouchend 并确保您的 可见，因为您内部没有任何内容（css 文件中的显示块）

<div id="d1">
    <a href='javascript:onDivClick(1)' style='display:block; width:100%; height:100%;'></a>
    // <a ontouchend='onDivClick(1)'></a> will be better
</div>
<div id="d2">
    <a href='javascript:onDivClick(2)' style='display:block; width:100%; height:100%;'></a>
</div>

在 JavaScript 中

function onDivClick(var case)
{
    switch(case)
    case 1:
        $('#d1').hide();  
        $('#d2').show();
        onBackButton = function(){show_div1();};
    break;
    case 2:
        $('#d2').hide();  
        $('#d1').show();
        onBackButton = function(){show_div2();};
    break;
}