用esc键隐藏div，然后点击？在jquery

如果我有一个div我已经显示感谢点击事件 - 有什么容易的是使其关闭，如果有人在div外部的任何地方点击，或点击esc键？用esc键隐藏div，然后点击？在jquery

2012-02-17 Elliot

随着> 1K代表你应该知道优于问这样的问题 - 你有什么尝试？ – 2012-02-17 18:37:28

将事件监听器绑定到这些事件并隐藏div。请参阅[如何检测元素外部的点击？]（http://stackoverflow.com/questions/152975/how-to-detect-a-click-outside-an-element）和[哪些键码用于jQuery转义键]（http://stackoverflow.com/questions/1160008/which-keycode-for-escape-key-with-jquery）。 – 2012-02-17 18:38:23

我不是JavaScript专家，但这应该有所帮助：http://www.javascriptkit.com/jsref/eventkeyboardmouse.shtml。使用onKeyPress for esc。对于点击，有一个透明的div或东西覆盖整个页面，你的div在上面。这个透明的对象应该有一个onClick，这个点击就是关闭点击。 – 2012-02-17 18:39:00

在这里你去...

$(document).on('click', function (e) { 
    if ($(e.target).closest(elem).length === 0) { 
     $(elem).hide(); 
    } 
}); 

$(document).on('keydown', function (e) { 
    if (e.keyCode === 27) { // ESC 
     $(elem).hide(); 
    } 
});

现场演示：http://jsfiddle.net/S5ftb/

来源

2012-02-17 18:42:07

完美谢谢！ – Elliot 2012-02-17 18:42:37

为什么它不工作，如果elem有多个班级，但如果我直接用我的2班级取代elem，那么它会工作？ – MIke 2018-03-05 06:53:48

@MIke你如何分配'elem'？检查它是否确实是对你的元素的引用。 – 2018-03-05 15:13:25

对于那些你们谁喜欢香草：

<div id="div">Click me dude</div> 

<script> 
    d = document.getElementById("div"); 
    d.addEventListener("click",  function(e){e.stopPropagation()},true); 
    addEventListener("click",  function() {d.style.display="none"},false); 
    addEventListener("keypress", function(e){e.keyCode==27 &&(d.style.display="none")},false); 
</script>

来源

2012-02-17 18:42:32

元素只有在元素的外部*发生* – 2012-02-17 18:47:04

时才应该隐藏，我会修改。 – 2012-02-17 19:28:40

感谢非jquery解决方案！ – Philipp 2017-06-04 11:07:33

用esc键隐藏div，然后点击？在jquery

回答

相关问题