logo标签列表

JavaScript事件：鼠标悬停时按键按下

javascriptjquery
5

你好，在页面上有多个div。如果用户悬停在其中一些div上并按下ctrl+z，我想弹出一个警报。根据用户悬停的是哪个div，我需要警报出span中的内容。

我尝试了使用getElementById，但遇到了多个元素的问题。我不确定是否需要绑定每个元素。

    <div class="mydiv">Keypress here!<span>test</span></div>
    <div class="mydiv">Keypress here!<span>test1</span></div>


var pressed = false;

onload = function(e) {
    var myElement = document.getElementsByTagName('div');

    function keyaction(e, element) {

        //  var originator = e.target || e.srcElement;
        if (e.charCode === 122 && e.ctrlKey) {
            //myElement.innerHTML += String.fromCharCode(e.charCode);
            alert(true);
        }
    }

    for (var i = 0; i < myElement.length; i++) {

        myElement[i].addEventListener("mouseover", function (e)
        {
            document.addEventListener("keypress", function(t){keyaction(t,e);}, false);
        });

        myElement[i].addEventListener("mouseout", function ()
        {
            document.removeEventListener("keypress", keyaction, false);
        });
    }
}
这会在第一次悬停和按下时触发警报，然后在此后多次触发。 - matt
1
你为什么把这个标记为jQuery？ - Mark Schultheiss
6个回答
2

我认为你做得过多了。一个简单的keydown事件，在mouseover上进行bind，在mouseout上进行unbind就可以解决问题。

这里有一个例子：

 <div id="wrapper">
    <div class="mydiv">Keypress here!<span>test</span></div>
    <div class="mydiv">Keypress here!<span>test1</span></div>
</div>
<br>
    Keys Pressed : 
    <br>
    <div id="key"></div>

$("#wrapper .mydiv").on("mouseover",function()
{
    $(document).bind("keydown",function(e) {
        var originator = e.keyCode || e.which;
         if(e.ctrlKey)
         $("#key").append(originator + ",");
    });

}).on("mouseout",function()
{
    $(document).unbind("keydown");
});

http://jsfiddle.net/s095evxh/2/

附注：由于某些原因，Jsfiddle不允许在鼠标悬停时使用keydown事件，因此您可能需要手动单击div才能使其正常工作，但该解决方案在本地系统上可以完美运行。

1
我建议您使用规范化的e.which（如果可用）。您还有代码122，这是F11键的代码，而不是与“z”键相关的90。

根据您的要求，在鼠标悬停时打开事件管理器，在未悬停时关闭事件管理器：

$('.mydiv').on('mouseenter', function () {
    $(window).on('keydown', function (e) {
        var code = e.which ||e.keyCode;
        $('#status').append('we:'+ code);
        if (code === 90 && e.ctrlKey) {
          $('#status').append('howdy');
       }
    });
});
$('.mydiv').on('mouseleave', function () {
    $(window).off('keydown');
});

请注意，我已经更改了将一些文本发布到虚构的“状态”div而不是您的警报，因为这将改变光标悬停的位置。将其更改为某些真实动作。事件冒泡可能存在问题，但我将把这个决定留给您。
这里是一个关键代码列表（搜索更多/另一个）https://gist.github.com/lbj96347/2567917 编辑：简单更新以将span文本推送到状态div中：
<div class="mydiv">Keypress here!<span>test</span>
</div>
<div class="mydiv">Keypress here!<span>test1</span>
</div>
<div id="status">empty
    <div>

$('.mydiv').on('mouseenter', function () {
    var me = this;
    $(window).on('keydown', function (e) {
        var code = e.which || e.keyCode;
        $('#status').append('we:' + code);
        if (code === 90 && e.ctrlKey) {
            $('#status').append($(me).find('span').text());
        }
    });
});
$('.mydiv').on('mouseleave', function () {
    $(window).off('keydown');
    $('#status').text('out');
});
0
我建议采用另一种方式。监听按键事件，然后选择具有悬停状态的元素。
$(document).keypress(function(e) {
  if (e.charCode === 26 && e.ctrlKey) {
    console.log("Key pressed");
    console.log($('.mydiv:hover span').html());
  }
});

Codepen演示

0
监听窗口的按键事件，并为元素添加鼠标事件，以切换一个变量来表示哪个元素是活动状态。 

var activeElem = null;
$(".mydiv")
    .on("mouseenter", function () {
        activeElem = $(this); 
    }).on("mouseleave", function () { 
        if(activeElem && activeElem.is(this)) {
            activeElem = null; 
        }
    });

$(window).on("keydown", function (evt) {
    if( activeElem && evt.keyCode===90 && evt.ctrlKey) {
        console.log(activeElem.find("span").text());  
    }
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="mydiv">Keypress here!<span>test</span></div>
    <div class="mydiv">Keypress here!<span>test1</span></div>

0
为了避免用户在悬停在
上时频繁绑定/解绑"keydown"处理程序，我会简单地跟踪当前正在悬停的
。类似这样： 

var hovering = null;
$(document)
  .on('keydown', function(e) {
    if (e.which === 90 && e.ctrlKey && hovering) {
      console.log($('span', hovering).text());
    }
  })
  .on('mouseover', '.mydiv', function(e) {
    hovering = this;
  })
  .on('mouseout', '.mydiv', function() {
    hovering = null;
  });
.mydiv:hover {
  cursor: pointer;
  color: gray;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="mydiv">Test <span>1</span></div>
<div class="mydiv">Test <span>2</span></div>
<div class="mydiv">Test <span>3</span></div>
<div class="mydiv">Test <span>4</span></div>
<div class="mydiv">Test <span>5</span></div>

-1
如果我理解你的问题正确的话，你正在寻找悬停元素内 span 的文本值。从 $(this) 遍历 DOM 将获得你想要的结果。
$(".mydiv").mouseover(function (e) {
    alert($(this).find('span').text());
});
1
只有当用户将鼠标悬停在元素上并按下Ctrl+Z时，才需要执行该操作。 - matt
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接