2

jQuery などのライブラリを使用せずにdiv、特定の要素 ( )をホバリングしたときにキーボードのキーが押されたかどうかを確認することはできますか?

4

5 に答える 5

4

以下は、純粋な JS 実装です。

myElement = document.getElementById('mydiv');

function keyaction(e){
    myElement.innerHTML+= String.fromCharCode(e.charCode);
}

myElement.addEventListener("mouseover",function() {
    document.addEventListener("keypress", keyaction);
});

myElement.addEventListener("mouseout",function() {
    document.removeEventListener("keypress", keyaction, false);
});

ここにデモンストレーションがあります：http://jsfiddle.net/bAV6f/1/

ホバーしたdivときに入力します。

于 2012-11-28T10:01:09.610 に答える
4

単純な JavaScript ソリューションを次に示します。

var yourDiv = document.getElementById("yourdiv"); //cache your div
var keyPressed = 0; //kinda-boolean flag, if it's not 0 then at least one key is pressed
document.onkeydown = function() { //when a key is "down"
    keyPressed ++; //increment the counter of "down" keys
};
document.onkeyup = function() { //when a key is "released"
    keyPressed --; //decrement the counter of "down" keys
    keyPressed = Math.max(0, keyPressed); //make sure it doesn't go negative
};
yourDiv.onmouseover = function() { //when you hover your div
    if(keyPressed !== 0) { //if a key is pressed
        //do stuff
    }
};

上記は、マウスがに入ったときにのみマウスイベントを発生させますdiv。内部を移動した場合に発火させたい場合は、onmousemove代わりにイベントを使用します。

yourDiv.onmousemove = function() { //when the mouse moves inside your div
    if(keyPressed !== 0) { //if a key is pressed
        //do stuff
    }
};

、および--addEventListenerを直接設定する代わりに使用できることに注意してください。ただし、概念は同じままです。onkeydownonkeyuponmousemover

于 2012-11-28T10:02:03.050 に答える
0

あなたの答えはイエスです、これは可能です。

同じdivにキーダウンイベントを設定するdivの上にホバー（onmouseover）するjavascriptイベントを追加する必要があります。

ユーザーがホバーを再度停止したとき（onmouseout）、キーダウンイベントを削除する必要があります。

于 2012-11-28T09:55:22.250 に答える
0

ショートアンサー

はい、可能です

しかし、可能であればどうすればよいでしょうか？

Jquery の使い方はとても簡単です。

$("div#selector").mouseover(function(e) {
  if (e.ctrlKey)
    alert('You are hover selector and pressing ctrl');
  if (e.altKey)
    alert('You are hover selector and pressing alt');
  if (evt.which == 77)
    alert('You are hover selector and pressing m');
  ...
});

文字に関連付けられた JavaScript キーコードを知るには、このキーのリストを参照してください

編集：質問に含める必要があるjQueryを使用しないというコメントを読みました

于 2012-11-28T10:18:47.570 に答える
-1

この目的でjqueryを使用できます

$("p").hover(function(){
//Your code
});

または

$(".selector").on({
mouseenter: function () {
//stuff to do on mouseover
}, 
mouseleave: function () {
//stuff to do on mouseleave

}

});
于 2012-11-28T09:56:36.120 に答える