div focus blur事件
2019-01-22 本文已影响0人
心中翼
image.png
开发过程中经常会遇到上图中的需求。
点击div显示删除按钮，当点击其他地方时删除按钮隐藏。
基本上都能想到利用focus及blur事件来完成需求。
div不支持focus及blur事件，不过可以在div上添加tabindex属性，就可以添加focus及blur事件了。
解决focus虚线方法：
. hidefocus="true"
. outline:0
<html>
<head>
<script>
function focusDiv(){
document.getElementById("button").style.display = "block" ;
}
function blurDiv(){
document.getElementById("button").style.display = "none" ;
}
</script>
</head>
<body>
<div id="container" tabindex="1" hidefocus="true"
onfocus="focusDiv()" onblur="blurDiv()"
style="position:relative;width:400px;height:40px;outline:0">
adafasbfasdf
<button id="button" style="width:100px;height:40px;display:none;
position:absolute;right:0px;top:0px;">
DELETE
</div>
</div>
</body>
</html>
