我正在为apple ibooks app写一本电子书。我通过使用javascript使它成为一个交互式电子书。我有javascript在浏览器中工作。在某种程度上，它适用于苹果ibooks应用程序。当我使用onclick事件时，该功能在浏览器和ibooks中执行。但是，在ibooks中，它还会启动翻页事件。除非返回上一页，否则看不到onclick事件。我的javascript如下。
//<![CDATA[
function changekey(direction){
//all 12 major keys
var keyArray = ["C","Db","D","Eb","E","F","Gb","G","Ab","A","Bb","B"];
//12 notes of each major key including non major scale notes
var keyNotes = {C:"C,C#/Db,D,D#/Eb,E,F,F#/Gb,G,G#/Ab,A,A#/Bb,B,C",
Db:"Db,D,Eb,E,F,Gb,G,Ab,A,Bb,B,C,Db",
D:"D,D#/Db,E,F,F#,G,G#/Ab,A,A#/Bb,B,C,C#,D",
Eb:"Eb,F,F#/Gb,G,Ab,A,Bb,B,C,C#/Db,E,Eb",
E:"E,F,F#,G,G#,A,A#/Bb,B,C,C#,D,D#,E",
F:"F,F#/Gb,G,G#/Ab,A,Bb,B,C,C#/Db,D,D#/Eb,E,F",
Gb:"Gb,G,Ab,A,Bb,Cb,C,Db,D,Eb,E,F,Gb",
G:"G,G#/Ab,A,A#/Bb,B,C,C#/Db,D,D#/Eb,E,F,F#,G",
Ab:"Ab,A,Bb,B,C,Db,D,Eb,E,F,F#/Gb,G,Ab",
A:"A,A#/Bb,B,C,C#,D,D#/Eb,E,F,F#,G,G#,A",
Bb:"Bb,B,C,C#/Db,D,Eb,E,F,F#/Gb,G,G#/Ab,A,Bb",
B:"B,C,C#,D,D#,E,F,F#,G,G#,A,A#,B"
};
var currentKey = document.getElementById("MajorScale").innerHTML;
var newNotes = [];
var newKey;
var firstChar;
var secondChar = [];
var secondCharText = [];
if(direction == "down"){
if(keyArray.indexOf(currentKey)==0){
document.getElementById("MajorScale").innerHTML=keyArray[keyArray.length-1];
newKey=keyArray[keyArray.length-1];
} else{
document.getElementById("MajorScale").innerHTML=keyArray[keyArray.indexOf(currentKey)-1];
newKey=keyArray[keyArray.indexOf(currentKey)-1];
}
} else if( direction == "up") {
if(keyArray.indexOf(currentKey)==keyArray.length-1){
document.getElementById("MajorScale").innerHTML=keyArray[0];
newKey = keyArray[0];
} else {
document.getElementById("MajorScale").innerHTML=keyArray[keyArray.indexOf(currentKey)+1];
newKey = keyArray[keyArray.indexOf(currentKey)+1];
}
}
newNotes = (keyNotes[newKey]).split(",");
for (var nn=0;nn < newNotes.length;nn++){
while (document.getElementById("Note"+(nn+1)).firstChild) {
document.getElementById("Note"+(nn+1)).removeChild(document.getElementById("Note"+(nn+1)).firstChild);
}
firstChar = document.createElementNS("http://www.w3.org/2000/svg", "tspan");
firstChar.setAttributeNS(null,"font-family","Utsaah");
firstChar.setAttributeNS(null,"font-size",25);
var firstCharText = document.createTextNode(newNotes[nn][0]);
firstChar.appendChild(firstCharText);
document.getElementById("Note"+(nn+1)).appendChild(firstChar);
for(i=1;i<newNotes[nn].length;i++){
secondChar[i] = document.createElementNS("http://www.w3.org/2000/svg", "tspan");
if(i==1||i==4){
secondChar[i].setAttributeNS(null,"font-family","OpusText");
} else {
secondChar[i].setAttributeNS(null,"font-family","Utsaah");
}
secondChar[i].setAttributeNS(null,"font-size",25);
secondCharText[i] = document.createTextNode(newNotes[nn][i]);
secondChar[i].appendChild(secondCharText[i]);
document.getElementById("Note"+(nn+1)).appendChild(secondChar[i]);
}
}
}
//]]>
它修改了以下svg文件。
<div>
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="660px"
height="105px" viewBox="0 0 660 105" enable-background="new 0 0 660 105" xml:space="preserve">
<g id="Layer_1">
<g id="TwelveTones">
<text id="Note1" style="text-anchor: middle" x="030" y="50"><tspan font-family="'Utsaah'" font-size="25">G</tspan></text>
<text id="Note2" style="text-anchor: middle" x="080" y="50" fill="#A7A9AB"><tspan font-family="'Utsaah'" font-size="25">G</tspan><tspan font-family="'OpusText'" font-size="25">#</tspan><tspan font-family="'Utsaah'" font-size="25">/A</tspan><tspan x="39.835" y="0" fill="#A7A9AB" font-family="'OpusText'" font-size="25">b</tspan></text>
<text id="Note3" style="text-anchor: middle" x="130" y="50"><tspan font-family="'Utsaah'" font-size="25">A</tspan></text>
<text id="Note4" style="text-anchor: middle" x="180" y="50" fill="#A7A9AB"><tspan font-family="'Utsaah'" font-size="25">A</tspan><tspan font-family="'OpusText'" font-size="25">#</tspan><tspan font-family="'Utsaah'" font-size="25">/B</tspan><tspan x="37.845" y="0" fill="#A7A9AB" font-family="'OpusText'" font-size="25">b</tspan></text>
<text id="Note5" style="text-anchor: middle" x="230" y="50"><tspan font-family="'Utsaah'" font-size="25">B</tspan></text>
<text id="Note6" style="text-anchor: middle" x="280" y="50"><tspan font-family="'Utsaah'" font-size="25">C</tspan></text>
<text id="Note7" style="text-anchor: middle" x="330" y="50" fill="#A7A9AB"><tspan font-family="'Utsaah'" font-size="25">C</tspan><tspan font-family="'OpusText'" font-size="25">#</tspan><tspan font-family="'Utsaah'" font-size="25">/D</tspan><tspan x="39.822" y="0" fill="#A7A9AB" font-family="'OpusText'" font-size="25">b</tspan></text>
<text id="Note8" style="text-anchor: middle" x="380" y="50"><tspan font-family="'Utsaah'" font-size="25">D</tspan></text>
<text id="Note9" style="text-anchor: middle" x="430" y="50" fill="#A7A9AB"><tspan font-family="'Utsaah'" font-size="25">D</tspan><tspan font-family="'OpusText'" font-size="25">#</tspan><tspan font-family="'Utsaah'" font-size="25">/E</tspan><tspan x="38.833" y="0" fill="#A7A9AB" font-family="'OpusText'" font-size="25">b</tspan></text>
<text id="Note10" style="text-anchor: middle" x="480" y="50"><tspan font-family="'Utsaah'" font-size="25">E</tspan></text>
<text id="Note11" style="text-anchor: middle" x="530" y="50" fill="#A7A9AB"><tspan font-family="'Utsaah'" font-size="25">F</tspan></text>
<text id="Note12" style="text-anchor: middle" x="580" y="50"><tspan font-family="'Utsaah'" font-size="25">F</tspan><tspan font-family="'OpusText'" font-size="25">#</tspan></text>
<text id="Note13" style="text-anchor: middle" x="630" y="50"><tspan font-family="'Utsaah'" font-size="25">G</tspan></text>
</g>
<g id="Aarows">
<g>
<g>
<path fill="none" stroke="#AA1800" stroke-width="2.5" stroke-miterlimit="10" d="M233.75,35.844
c11.329-23.826,31.709-24.192,40.741-3.947"/>
<g>
<path fill="#AA1800" d="M274.244,31.39c0.835-1.893,3.28-3.589,5.131-4.368c-1.787,2.844-3.036,6.124-3.125,9.541
c-2.317-2.484-5.541-3.906-8.74-4.94C269.576,31.006,272.198,30.553,274.244,31.39z"/>
</g>
</g>
</g>
<g>
<g>
<path fill="none" stroke="#AA1800" stroke-width="2.5" stroke-miterlimit="10" d="M583.75,35.844
c11.329-23.826,31.709-24.192,40.741-3.947"/>
<g>
<path fill="#AA1800" d="M624.244,31.39c0.835-1.893,3.28-3.589,5.131-4.368c-1.787,2.844-3.036,6.124-3.125,9.541
c-2.317-2.484-5.541-3.906-8.74-4.94C619.576,31.006,622.198,30.553,624.244,31.39z"/>
</g>
</g>
</g>
<g>
<g>
<path fill="none" stroke="#AA1800" stroke-width="2.5" stroke-miterlimit="10" d="M37.5,54.002
c18.481,19.995,57.959,24.049,81.452,3"/>
<g>
<path fill="#AA1800" d="M118.521,57.361c-2.069-0.029-4.585-1.618-6.025-3.017c3.316,0.534,6.824,0.403,10.003-0.85
c-1.382,3.103-1.431,6.627-1.134,9.975C119.992,61.808,118.55,59.571,118.521,57.361z"/>
</g>
</g>
</g>
<g>
<g>
<path fill="none" stroke="#AA1800" stroke-width="2.5" stroke-miterlimit="10" d="M137.5,54.002
c18.481,19.995,57.959,24.049,81.452,3"/>
<g>
<path fill="#AA1800" d="M218.522,57.361c-2.069-0.029-4.585-1.618-6.025-3.017c3.316,0.534,6.824,0.403,10.003-0.85
c-1.382,3.103-1.431,6.627-1.134,9.975C219.992,61.808,218.55,59.571,218.522,57.361z"/>
</g>
</g>
</g>
<g>
<g>
<path fill="none" stroke="#AA1800" stroke-width="2.5" stroke-miterlimit="10" d="M287.5,54.002
c18.481,19.995,57.959,24.049,81.452,3"/>
<g>
<path fill="#AA1800" d="M368.522,57.361c-2.069-0.029-4.585-1.618-6.025-3.017c3.316,0.534,6.824,0.403,10.003-0.85
c-1.382,3.103-1.431,6.627-1.134,9.975C369.992,61.808,368.55,59.571,368.522,57.361z"/>
</g>
</g>
</g>
<g>
<g>
<path fill="none" stroke="#AA1800" stroke-width="2.5" stroke-miterlimit="10" d="M387.5,54.002
c18.481,19.995,57.959,24.049,81.452,3"/>
<g>
<path fill="#AA1800" d="M468.522,57.361c-2.069-0.029-4.585-1.618-6.025-3.017c3.316,0.534,6.824,0.403,10.003-0.85
c-1.382,3.103-1.431,6.627-1.134,9.975C469.992,61.808,468.55,59.571,468.522,57.361z"/>
</g>
</g>
</g>
<g>
<g>
<path fill="none" stroke="#AA1800" stroke-width="2.5" stroke-miterlimit="10" d="M487.5,54.002
c18.481,19.995,57.959,24.049,81.452,3"/>
<g>
<path fill="#AA1800" d="M568.522,57.361c-2.069-0.029-4.585-1.618-6.025-3.017c3.316,0.534,6.824,0.403,10.003-0.85
c-1.382,3.103-1.431,6.627-1.134,9.975C569.992,61.808,568.55,59.571,568.522,57.361z"/>
</g>
</g>
</g>
</g>
</g>
<g id="Steps">
<text transform="matrix(1 0 0 1 71.5527 90.5519)" font-family="'Utsaah'" font-size="25">W</text>
<text transform="matrix(1 0 0 1 171.5529 90.5519)" font-family="'Utsaah'" font-size="25">W</text>
<text transform="matrix(1 0 0 1 598.5363 90.5519)" font-family="'Utsaah'" font-size="25">H</text>
<text transform="matrix(1 0 0 1 248.5363 90.5519)" font-family="'Utsaah'" font-size="25">H</text>
<text transform="matrix(1 0 0 1 321.5525 90.5519)" font-family="'Utsaah'" font-size="25">W</text>
<text transform="matrix(1 0 0 1 421.5523 90.5519)" font-family="'Utsaah'" font-size="25">W</text>
<text transform="matrix(1 0 0 1 521.5523 90.5519)" font-family="'Utsaah'" font-size="25">W</text>
</g>
</svg></p><p>
<svg onclick='changekey("down");' version="1.1" id="downkey" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
width="30" height="30" viewBox="0 0 20.641 22.713" enable-background="new 0 0 20.641 22.713" xml:space="preserve">
<polygon fill="#44612B" points="18.27,1.532 1,11.505 18.27,21.478" />
</svg> <span id="MajorScale" display="inline-block" width="150">G</span> Major Scale
<svg version="1.1" onclick='changekey("up");' id="upkey" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
width="30" height="30" viewBox="0 0 20.641 22.713" enable-background="new 0 0 20.641 22.713" xml:space="preserve">
<polygon fill="#324DCE" points="1.913,21.478 19.183,11.505 1.913,1.532" />
</svg></p>
</div>
我已尝试将onclick='changekey("down");'更改为ontouchstart和ontouchend事件，但这些在ibooks应用中无法识别。
可在此处查看正在运行的浏览器代码http://jsfiddle.net/slayerofgiants/9772W/1/ 这里可以看到ibooks的电子书样本。交互式部分位于第3页，它根据点击的按钮将页面更改为第4页或第2页。 https://www.dropbox.com/s/4x1uex3cbw56c7k/Example.epub
我正在尝试找到触发翻页事件的内容以及如何为该功能禁用它。
谢谢， --christopher
答案 0 :(得分：1)
问题是您的onclick事件也会传递到iBooks应用程序，因此它会触发您的代码以及处理onclick的默认代码。如果您将return false;添加到Javascript函数的末尾，则应该修复它。
This thread解释得更多。