關於懸停的Javascript事件按鍵

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

我覺得你太過分了，需要什麼。一個簡單的​​事件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"); 
}); 

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

PS：由於某種原因，的jsfiddle不允許在鼠標懸停keydown事件，所以你可能需要手動點擊div來使其工作，但該解決方案在本地系統上完美無瑕。

Answer 2

如果我理解正確你的問題，你正在尋找的span的懸停的元素中的文本值。遍歷從$(this)的DOM將得到你想要的。

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

Answer 3

監聽窗口上的按鍵並將鼠標事件添加到元素以切換變量與哪個元素處於活動狀態。

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>

Answer 4

爲了防止頻繁的綁定/解綁定的"keydown"處理程序每​​當用戶將鼠標懸停在<div>，我想簡單地跟蹤目前正在徘徊的<div>的。事情是這樣的：

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>

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

我建議如果有您使用的標準化e.which。您還有代碼122，它是與'z'鍵不相關的F11鍵代碼。

打開事件管理器時，在上下車的時候不按你的既定的願望：

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

注意，我改變了張貼一些文本到一個虛構的「狀態」分區，而不是你的警覺，這將改變光標懸停的地方。將其改爲某些實際行動。事件冒泡可能會有問題，但我會給你留下這種決心。

這是一個關鍵的代碼清單（谷歌的更多/其他）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'); 
});