繁体   English   中英

在 div1 和 div2 外部单击时运行 Javascript function

[英]Run a Javascript function when clicking outside div1 AND div2

只有在div1 AND div2外部单击时,才尝试运行 Javascript function 。 如果在 div1 或 div2 内单击,则不会发生任何事情。 知道我怎么能做到这一点吗? 示例:我需要将div2设置为display: none并在 div 外部单击时另外将 styles 添加到div1

 var x = document.getElementById("mega-menu"); document.addEventListener('mouseup', function(e) { if (.(x.contains(e.target) || document.getElementById("menu-item-136").contains(e.target))) { x.style;display = 'none'. var elem = document;querySelectorAll("#menu-item-136"). elem.forEach((elem) => { elem.style;backgroundColor = "red"; }); } });

这是我能得到的最远距离。 但是目前,当单击菜单项时,div2(mega-menu)也被隐藏了......希望你明白我的意思......

谢谢

你能完成上面的示例代码吗? 我已在您的代码段中添加了元素,但无法复制您的问题。 它似乎对我有用。

还有一些离题的最佳实践:

  • HTML 标准不允许具有重复 ID 的元素。 如果您有多个 ID #menu-item-136元素,则应使用 class 而不是 ID。
  • 在事件侦听器之外获取两个元素......更高效(就像你已经在使用#mega-menu一样)
  • 与其使用带有嵌套块的 if 语句,不如使用 if...return 代替。 这样你的代码就少了缩进。

 var x = document.getElementById('mega-menu'); var y = document.getElementById('menu-item-136'); document.addEventListener('mouseup', function(e) { if (x.contains(e.target) || y.contains(e.target)) return; x.style.display = 'none'; y.style.backgroundColor = 'red'; });
 div { border: 1px solid black; }
 <div id='mega-menu'>mega menu</div> <div id='menu-item-136'>menu 136</div>

从这段代码看起来,

document.querySelectorAll("#menu-item-136");

当您循环浏览结果时,有多个 id 为“menu-item-136”的元素。

首先,如果有多个元素具有相同的 Id,则它不是有效的 HTML。

这就是为什么

document.getElementById("menu-item-136").contains(e.target)

这会导致错误,因为它可能选择了错误的元素,而不是您单击的元素。

即使您使用 class 来获取元素,它仍然可能会失败,因为基于 class 的 querySelector 仍然会导致返回多个元素。

而不是检查您的目标元素是否包含在 div 中 - 使用检查元素父层次结构是否具有您为菜单项 div 添加的 class 名称。

if(e.target.closest(".container-class"))

所以现在你只是检查当前目标是否有任何带有菜单项 class 的父级。

暂无
暂无

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM