我真的想完成一个以上的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;
}