Question

我必须实现这个目标：

隐藏div中的文字
用户将按Ctrl键，然后将鼠标放在按钮上 - 必须调用javascript函数，并显示div中的文本
如果用户释放Ctrl键 - 文本应该消失（即使鼠标位于按钮上），类似地，如果用户将鼠标从按钮移出 - 文本应该消失（即使按下Ctrl键也是如此））

到目前为止我的工作：

<html>
<head>
<script type="text/javascript" src="jquery.js"></script>
<script>
    loadHandler = function(){
        $("#selector").mouseover(function(e){
            if(e.ctrlKey) {
                //what do I have to write here so that holding CTRL will be recognized ?
            }
        });
    }
</script>
</head>

<body onload="loadHandler();">
<button type="button" onmouseover="document.getElementById('center').style.visibility = 'visible'">CTRL+mouseover</button>
<div id="center" onmouseout="this.style.visibility = 'hidden'">
        <h1>Text text text</h1>
</div>
</body>

</html>

Link

我必须承认我刚刚开始学习JS所以请帮帮我:)。

如何让CTRL和鼠标同时被识别？

Answer 1

完美的工作版

$(document).ready(function(){
    var keyPressed = false;
    var mouseovered = false;
    $("#center").mouseover(function(e){
      doStuff();
         mouseovered = true;
    });
    $("#center").mouseout(function(){
        doStuff();
        mouseovered = false; 
    });
    $(document).keydown(function(e){
         doStuff();
         if (e.ctrlKey) 
         {
             keyPressed = true;
         }
        else keyPressed = false;
    });

    $(document).keyup(function(e){

         if (keyPressed) 
         {
             keyPressed = false;
         }
        doStuff();
    });

    function doStuff()
    {
        if(mouseovered && keyPressed) $("#center").css({"color": "#000"});
    else  $("#center").css({"color": "#fff"});
    }
});

我没有默认隐藏文字。否则你很难找到目前的位置。在检查之前不要忘记点击body。否则keypress将无法被发现。

工作Fiddle

Answer 2

工作示例

MouseEvent.shiftKey，MouseEvent.ctrlKey

MouseEvent.ctrlKey

MouseEvent.shiftKey

   <img onmouseover="keypress_test(event)" onmouseout="keypress_test(event)">


    function keypress_test(event) {

             // false, no press, 
             // true, pressed

              console.log(event.ctrlKey)

              console.log(event.shiftKey)


             if (event.ctrlKey) {

                    // hide text
                }
       }

JS事件CTRL +鼠标悬停+隐藏文本

2 个答案: