使用逻辑或运算符时条件判断失效，点击指定元素仍隐藏目标元素的问题求助

我现在碰到个棘手的小问题，想实现这样的效果：当在页面body上触发mousedown事件时，隐藏带有da类的蓝色方块；但如果点击的是按钮（BUTTON标签）或者绿色的aa类容器时，就不要隐藏这个蓝色方块。

单独用一个条件判断的时候代码是正常工作的，可一旦用上逻辑或（||）把两个条件组合起来，判断就完全失效了——不管点哪个元素，蓝色方块都会被隐藏，这可太奇怪了！

下面是我写的完整代码，麻烦大家帮我看看哪里出问题了：

CSS 代码 #

.aa{
    position: absolute;
    top: 7rem;
    left: 5rem;
    width:20rem;
    height: 20rem;
    background-color:rgba(39, 139, 69, 0.733) ;
}
button{
    position: relative;
    top: 8rem;
    left: 8rem;
    background-color: #f0ff1f;
    border: none;
    padding: 1rem;
    width: 5rem;
    color: rgb(255, 255, 255);

}
button:active{
    background-color: #565c0b;
}
.da{
    position: absolute;
    top: 8rem;
    left: 30rem;
    width: 15rem;
    height: 15rem;
    background-color:rgba(1, 111, 255, 0.733) ;
}

HTML 代码 #

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body style="background-color: rgb(47, 53, 54);">
   <div class="aa"><button>button</button></div>
   <div class="da"></div>
    <script>
document.onmousedown =function(event){
    
    if(event.target.tagName!='BUTTON'  ||  event.target.className!='aa'){
      document.getElementsByClassName('da')[0].style.display = 'none';
console.log(event.target.className!='da' || event.target.tagName!='BUTTON')
console.log(event.target.tagName, event.target.className)}}

    </script>
</body>

</html>

备注：内容来源于stack exchange，提问作者Bhoothana