如何在鼠标点击div区域外执行函数

Posted 2023-04-13

可以监听这个div的父元素，如body。
然后再监听函数中检查e.target || e.srcElement，看是不是你的div, 不是的话，就隐藏掉div

javascript code?

var yourDiv = document.getElementById('yourDiv');
document.body.onclick = function(e)
e = e || window.event;
var target = e.target || e.srcElement;
if(target != yourDiv)
yourDiv.style.display = 'none';

参考技术A 假如div里面有东西，例如button
var btn = document.getElementsByTagName("button")[0]
var div = document.getElementsByTagName("div")[0]
document.body.onclick = function()
var e = window.event.target;
if(e == div || e == btn)
div.style.display = "block"
else
div.style.display = "none"

除指定区域外点击任何地方隐藏DIV

<ul>
    <li><a href="#">主菜单1</a></li>
    <li><a href="#">主菜单2</a></li>
    <li class="li-other">
        <a href="javascript:;">其他<i class="arrow-down"></i></a>
        <div class="otherbox">
            <ul>
                <li><a href="#">子菜单1</a></li>
                <li><a href="#">子菜单2</a></li>
            </ul>
        </div>
    </li>
</ul>                

HTML如上：

JQuery如下：

$(‘.li-other‘).on(‘mousedown‘,function(event){
    event.stopPropagation();//阻止mousedown 事件冒泡（注意只阻止了mousedown事件）
    event.preventDefault();//阻止当前元素默认事件
    $(‘.li-other‘).toggleClass("active");
});
$(document).on(‘mousedown‘,function(){
    $(‘.li-other‘).removeClass("active");
});