div focus blur事件

作者: 心中翼 | 来源:发表于2019-01-22 16:00 被阅读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>