原生js實現點擊目標區域外側觸發事件


有時候由於需要實現點擊出現下拉框,而點擊空白處或除了目標區域之外而響應事件使得彈框消失,此文則與各位分享如何使用原生js實現該需求
整個html文件獻上(已封裝)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        .box{
            width: 200px;
            height: 200px;
            background-color: red;
        }
    </style>
</head>
<body>
    <div class="box">
    </div>
</body>
<script>
	//封裝
    function clickoutSide(nameClass,callback){
        // 全局注冊點擊事件
        document.onclick = function(e){
            //若點擊元素為目標元素則返回
            if(e.target.className===nameClass) return  
            //否則執行回調函數
            callback()
    	}
    }
    clickoutSide('box',function(){
        console.log('點擊了外部');

    })
</script>
</html>


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM