Javascript中的關鍵事件

我正在研究四元數程序，該程序允許用戶在右側旋轉圖像，以便它與左側的圖像相匹配。到目前爲止，我有一個解決方案，允許用戶更新使用按鈕HTML文件中updateRotation（）：Javascript中的關鍵事件

<span class="rbText">X : </span><input type="button" id="xDn" class="btn" value="-" onclick="updateRotation(-5, 0, 0);" disabled/> 
<span class="rbText">&nbsp;</span><input type="button" id="xUp" class="btn" value="+" onclick="updateRotation(5, 0, 0);" disabled/></br> 
<span class="rbText">Y : </span><input type="button" id="yDn" class="btn" value="-" onclick="updateRotation( 0,-5, 0);" disabled/> 
<span class="rbText">&nbsp;</span><input type="button" id="yUp" class="btn" value="+" onclick="updateRotation(0, 5, 0);" disabled/></br>

我知道要允許使用鍵輸入來更新旋轉的用戶。

這裏是我的JS

var currentId=0; 
var maxTrials = 6; 
var dateStart, dateEnd; 
var value; 

//user clicks start to begin trial 
function clickedStart(){ 
    //get the current pattern 
    parsePattern(trialData[currentId],currentPattern); 
    forceUpdate.right='show'; 
    forceUpdate.left='show'; 
    document.getElementById('btnStart').disabled = true; //disable start button 
    getKeyInput(); 
    timerOperation(true); //start clock 
} 

function parsePattern(unparsedStr, patSet){ 
    var spl = unparsedStr.split("-"); 
    var i=0; 
    patSet.pattern = spl[i++]; 
    patSet.xL = spl[i++]; 
    patSet.yL = spl[i++]; 
    patSet.zL = spl[i++]; 
    patSet.xR = spl[i++]; 
    patSet.yR = spl[i++]; 
    patSet.zR = spl[i++]; 
} 

function getKeyInput(){ 
    document.getElementById('canvasRight').onkeyclick = function(e){ 
     e = e || event 
     switch(e.keyCode) { 
      case 37: // left 
       updateRotation(0,0,5); 
       return false 
     case 38: // up 
       updateRotation(0,5,0); 
       return false 
     case 39: // right 
       updateRotation(5,0,0); 
       return false 
     case 40: // down 
       updateRotation(0,-5,0); 
       return false 
     } 
    } 
} 

//we apply global rotation and not local rotation 
function updateRotation(xRot, yRot,zRot){ 
    //the rotation is in terms of absolute rotation, so note the quaternion rotation order 
    var q = getQuaternion(xRot, yRot, zRot);// get rotation provided by current interaction 

    q.multiply(t3DRQuat); //apply to existing orientation 
    q.normalize();  //keep the quaternion normalized... accrual of rounding errors causes drift 
    t3DRQuat.copy(q);  //copy the new orientation into t3DRQuat 

    t3DRight_shape.quaternion.copy(q); //apply orientation to shape 
    //if there has been one update, then we can enable the end button 
    if(document.getElementById('btnEnd').disabled) document.getElementById('btnEnd').disabled = false; 
}

而我的HTML文件：

<div id="base" class="main"> 

<div id="topBand" class="div-band"></div> 

<div id="canvasLeft" class="div-float-left"> 

</div> 

<div id="canvasRight" class="div-float-right" tabindex = "0"> 

</div> 

<div id="bottomBand" class="control-band"> 
    <span class = "controlHelp">Control Panel</span> 
    <div id="startControl" class="startDoneTextBox"> 
     <button type="controlButton" onclick="clickedStart();" id="btnStart"><span class="btn" id="btnStartText">Start!</span></button></br> 
     <dir></dir> 
     <button type="controlButton" onclick="clickedEnd();" id="btnEnd" disabled><span class="btn" id="btnEndText">Done!</span></button></br> 
    </div> 

    <div> 
    <span class = "guideHelp">Match the 3D shape on the left by rotating the shape on the right</span></br> 
    <span class = "userHelp">1. Press Start to load the images</span></br> 
    <span class = "userHelp">2. Press the image on the right and use the arrow keys to change position</span></br> 
    <span class = "userHelp">3. Press Done, when you think the shapes are matched</span></br> 
    </div> 

    </div> 
</div>

我updateRotation（）正常工作與按鈕的方法。但是當我嘗試使用這些鍵時，絕對沒有任何反應。是我的getKeyInput（）問題的根源？

來源

2014-11-24 DigiSweep

使用onkeydown或onkeypress或onkeyup而不是onkeyclick。

來源

2014-11-24 12:45:41 Fenex

Javascript中的關鍵事件

回答

相關問題