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中的关键事件

回答

相关问题