问答博客资讯标签用户活动
logo极客观点logo项目管理logoHarmonyOS
开发者社区
javascript
前端
python
node.js
react
vue.js
php
laravel
go
人工智能
mysql
linux
ios
java
android
css
typescript
spring
程序员
logoONES 研发管理logo思否企业问答logo安谋科技 XPU

如何使用event.target.matches匹配div元素

社区维基
1
新手上路，请多包涵
<!DOCTYPE html>
<html>
    <head>
        <style>
            .dropdown-content a{
                display: block;
                background-color: blue;
            }
        </style>
    </head>
    <body>
        <div class="dropdown-content">
            <a>1</a>
            <a>2</a>
        </div>
        <script>
            window.onclick = function(event){
                if(!event.target.matches('.dropdown-content')){
                    alert("foo");
                }
            };
        </script>
    </body>
</html>

我试图让 alert(foo); 仅当我们没有点击正文中 div 标签内的任何内容时才执行。不幸的是，无论我点击哪里，它都会执行。为什么？

原文由 Sahand 发布，翻译遵循 CC BY-SA 4.0 许可协议

Stack Overflow 翻译javascriptjqueryhtmldom
阅读 1.2k
2 个回答
得票最新
社区维基
1
✓ 已被采纳
 window.onclick = function(event){
 if (document.getElementsByClassName('dropdown-content')[0].contains(event.target)){
    // inside
  } else{
    // outside
    alert('foo');
  }
};

 .dropdown-content a{
    display: block;
    background-color: blue;
}

 <div class="dropdown-content">
  <a>1</a>
  <a>2</a>
</div>

获取您的元素并使用 contains 检查点击是在内部还是外部。如果在外面然后警报。

matches 不工作，因为您正在单击 a 没有 .dropdown-content 标签的标签。所以每次价值都是假的。它 alert('foo')

原文由 Durga 发布，翻译遵循 CC BY-SA 3.0 许可协议

社区维基
1

如我所见，您必须向 de div.conta 添加内容，我制作了一个 演示 并使用 dom、className（我认为正确，但可以使用任何）：

 <div class="dropdown-content">
abc
            <a class="name">1</a>
            <a>2</a>
        </div>

window.onclick = function(event){
console.log(event.target.className);

                if(event.target.className!=='dropdown-content'){
                    console.log("foo");
                }
            };

原文由 Álvaro Touzón 发布，翻译遵循 CC BY-SA 3.0 许可协议

撰写回答
你尚未登录，登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进，让解决方法与时俱进
推荐问题