覆盖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); 

和

don’t use onClick with 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;
}

标签：addeventlistener,android,cordova,back-button
来源： https://codeday.me/bug/20191011/1891800.html