Question

嗨我在页面上有多个div。我想根据用户悬停在其中一个div上并按下控制z来发出警报。我需要实际上警告范围内的内容取决于用户悬停在哪个div上。

我尝试过使用getbyId，多个元素出现了问题。我不确定我是否需要绑定每个元素。

    <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);
        });
    }
}

Answer 1

我认为你对所需要的东西太过分了。 keydown上的bind事件mouseover和unbind上的mouseout上的简单<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"); });事件就行了。

以下是一个例子：

DIV

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

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

Answer 2

我建议您使用标准化的e.which（如果可用）。您还有代码122，其中F11键代码不是90与“＆＃39;”相关的代码。键。

当不按照您的要求时，打开和关闭事件管理器：

$('.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');
});

请注意，我更改了将某些文字发布到虚构的状态＆＃34; div而不是你的警报，因为它会改变光标悬停的位置。改变一些实际行动。事件冒泡可能会有问题，但我会把这个决心留给你。

这是一个关键代码列表（google for more / another）https://gist.github.com/lbj96347/2567917

编辑：简单更新将跨区文本推送到状态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');
});

Answer 3

监听窗口上的按键并将鼠标事件添加到元素中以切换变量以及哪个元素处于活动状态。

＆＃13;

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());  
    }
});

＆＃13;

<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>

＆＃13;

Answer 4

为防止用户将鼠标悬停在"keydown"上时频繁绑定/取消绑定<div>处理程序，我只会跟踪当前正在悬停的<div>。像这样：

＆＃13;

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;
  });

＆＃13;

.mydiv:hover {
  cursor: pointer;
  color: gray;
}

＆＃13;

<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>

＆＃13;

Answer 5

我会提出相反的建议。听取按键，然后选择具有悬停的元素。

$(document).keypress(function(e) {
  if (e.charCode === 26 && e.ctrlKey) {
    console.log("Key pressed");
    console.log($('.mydiv:hover span').html());
  }
});

Codepen Demo

Answer 6

如果我正确理解您的问题，您正在寻找悬停元素中span的文本值。从$(this)遍历DOM将获得您想要的结果。

$(".mydiv").mouseover(function (e) {
    alert($(this).find('span').text());
});

悬停时的Javascript事件按键

6 个答案: