覆盖在PhoneGap的Andr​​oid的后退按钮 [英] Overriding the Back Button in PhoneGap Android

问题描述

我真的想完成一个以上的addEventListener，但什么是错的？

I`m trying to accomplish more than one addEventListener, but something is wrong?

例如，如果我们有显示在开头和页和第一个对3的div其他两个隐藏

For example if we have 3 divs on page and first one is displayed on the beginning and other two hidden.

<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（），一切工作正常。在返回键pressed它提醒我应该给＃div1的，因为它应该的（// $（'＃D1）显示（）;被comented）

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甚至后退按钮不是pressed！的addEventListener像开始的主要功能show_div2（）和返回按钮，该功能不仅设置监听器。

It immediately fires "I should show #div2" even back button is not pressed! addEventListener like started main function show_div2() and not just set listener on back button to that function.

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

可能是什么原因可能出现这种情况？的

推荐答案

试试这个， 在设备准备添加监听器后退按钮像这样

try this, on device ready add a listener for backbutton like this

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

和

不使用的onClick与PhoneGap的

don't use onClick with phoneGap

使用的href，或ontouchend并确保你的＆LT;一>是可​​见的，因为你没有（在你的CSS文件显示块）

use href, or ontouchend and be sure that your < a > is visible because you dont have anything inside(display block in your css file)

<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

in 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;
}

这篇关于覆盖在PhoneGap的Andr​​oid的后退按钮的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！