从正文单击调用 JS 函数但不包括某些元素答案

【问题标题】：Call a JS function from a body click but excluding some elements从正文单击调用 JS 函数但不包括某些元素
【发布时间】：2018-10-08 14:30:09
【问题描述】：

我在 div 元素中有一个下拉菜单。当点击页面上的任何其他主链接（不包括下拉菜单本身的链接）时，调用 javascript 函数 HideDropdown() 隐藏菜单：

<script>
function HideDropdown() {
    $("#dropdown-content-id2").hide();
    $("#dropdown-content-id").hide();}
</script>

当我单击主体上除下拉菜单本身之外的任何位置时，我还想调用 HideDropdown() 来隐藏菜单（如果它已打开）。

在正文标签中我插入了这个：

<body onload="ShowPage(1)" onclick="HideDropdown()">

当我单击屏幕上的任意位置时，它成功隐藏了下拉菜单。我想排除对显示下拉菜单的链接以及下拉菜单本身的任何位置的点击，所以我修改了正文标签：

<body onload="ShowPage(1)" onclick="HideDropdownCall(e)">

并创建了一个新的 javascript 函数以从正文 onclick 调用：

<script>
 function HideDropdownCall(e) {
     if(e.target.id != "dropdown-content-id" ){
         HideDropdown();
 }
 </script>

但那没有用，所以我修改了它：

<script>
 function HideDropdownCall(e) {
     if(e.target.id != "dropdown-content-id" ){
         $("#dropdown-content-id2").hide();
         $("#dropdown-content-id").hide();}
 }
 </script>

但这仍然行不通。

所以我的问题是，我怎样才能从正文点击调用 HideDropdown() 函数，经过过滤，以便不计算下拉菜单本身的点击？

非常感谢您的帮助。

编辑：

经过一些工作，我将问题简化为：我可以像这样从 body 标记调用 HideDropdown() 函数：

<body onload="ShowAjax(1)" onclick="HideDropdown()">

这行得通。但是，当我将其更改为具有限定条件的相同函数时（如果单击事件由下拉菜单触发，则不是），开发控制台会显示“TypeError：e 未定义”，因此它与条件语句有关：

<body onload="ShowAjax(1)" onclick="HideDropdown_B()">

<script>
function HideDropdown_B(e) {
    if(e.target.id != "dropdown-content-id" ){
        $("#dropdown-content-id2").hide();
        $("#dropdown-content-id").hide();}
}
</script>

所以我的问题现在归结为找出为什么上面的新函数在没有 if 语句的同一个程序工作时返回类型错误。

【问题讨论】：

如果您提供了一个包含 html 和 JS 代码的最小示例，这样我们就可以使用它并查看您在谈论什么行为，这将会很有帮助
点击正文关闭下拉列表，点击下拉调用 e.stopPropagation() 以阻止点击事件传播到正文 - 我在这里写了一个更好的答案 stackoverflow.com/questions/17965839/…
How do I prevent a parent's onclick event from firing when a child anchor is clicked?的可能重复
我们必须查看您的标记。您的事件委托架构应该可以工作。

标签： javascript jquery

【解决方案1】：

您可以做的是在要防止隐藏下拉列表的元素上添加属性data-prevent='true'。例如：

<a href="/some-path/to-someplace" data-prevent="true">Link</a>

并修改您的函数以过滤掉这些元素，如下所示：

function hideDropdown(evt) {

    evt.preventDefault();  // you might not need this (usefull in case of a tags & preventing redirects)

    if (!evt.target.getAttribute('data-prevent') || evt.target.getAttribute('data-prevent') === 'false') {

        $("#dropdown-content-id2").hide();
        $("#dropdown-content-id").hide();

    }

}

【讨论】：

感谢您的回答。我现在正在处理这个问题，稍后我会发布结果。再次感谢。
Syd，我合并了您的代码并从 body 标记中调用它，如下所示：，然后我在下面插入了您的代码身体标签的关闭。但 Firefox 开发控制台显示“ReferenceError: hideDropdown 未定义”。你能说明应该如何调用这个函数吗？非常感谢。
我在上面编辑了我的问题并进行了更新和澄清。
嗯，你必须在 head 标签内的脚本中声明函数，并确保函数名称相同

【解决方案2】：

下面是一个例子：

let menu = document.getElementById('menu');
document.body.addEventListener('click', e => {
    if (!menu.contains(e.target))
      console.log('close menu');
});

<div id='menu'><a id='link'>link</a> and menu</div>
document body here

但是，您可能实际上想要关闭菜单，具体取决于单击的链接。

另一种方法：

let menu = document.getElementById('menu');
menu.addEventListener('click', e => e.stopPropagation());
document.body.addEventListener('click', e => console.log('close menu'));

<div id='menu'><a id='link'>link</a> and menu</div>
document body here

【讨论】：

【解决方案3】：

感谢所有回答的人。我解决了这个问题。这是解决方案：

在正文标签中：

<body onload="ShowPage(1)" onclick="HideDropdown_B(event)">

HideDropdown_B 函数：

<script>
function HideDropdown_B(event) {
    TargetID = event.target.getAttribute('id');
    TargetClass = event.target.getAttribute('class');
    if((TargetID != "dropdown-content-id") && (TargetClass != "button_01") &&   (TargetClass != "dropdown") && (TargetClass != "button_dropdown") ) {
   $("#dropdown-content-id2").hide();
       $("#dropdown-content-id").hide();}
}
</script>

这可以在单击排除元素以外的任何位置时关闭菜单。

【讨论】：