时间戳

首页 > 解决方案 > 在有限制的情况下单击正文时调用 javascript 程序

javascript - 在有限制的情况下单击正文时调用 javascript 程序

问题描述

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

当我单击主体上除下拉菜单本身之外的任何位置时，我还想调用 HideDropdown() 来隐藏菜单（如果它已打开）。我创建了一个 javascript 点击处理函数，但它没有隐藏菜单（它什么也不做）。

这是新的 javascript 点击处理程序（位于 body 标记的正下方）：

<script>
body.onclick = function(event) {
  target = event.target;

if (target != "#dropdown-content-id") {
  if (target != "#dropdown-content-id2") {
    HideDropdown();
    };
  };
};
</script>

这是html代码的相关部分：

<div class="C1"><br>
<div class="dropdown">
<button class="button_01" onclick="HideDropdown();ShowDXT(2);ShowDropdown();">  Display Data Segments</button>
</div></div>

<div id="dropdown-content-id">
   <div class="C1"><button class="button_dropdown" onclick="ReadData(1)">Data   One</button></div>
   <div class="C1"><button class="button_dropdown" onclick="ReadData(2)">Data   Two</button></div>
   <div class="C1"><button class="button_dropdown" onclick="ReadData(3)">Data   Three</button></div>
</div>

这是 HideDropdown 函数：

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

我知道身体点击会隐藏菜单，但我需要指定它仅在目标不是下拉菜单本身时才隐藏。

非常感谢您的任何想法。

编辑 100818：

经过一些工作，我将我的问题缩减为：我可以从 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 语句的同一个程序工作时返回类型错误。

标签： javascriptjquery

解决方案

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

$(document).ready(
    function(){
        $('body').click(function(event) {
            target = event.target;

            if (target != "#dropdown-content-id") {
                if (target != "#dropdown-content-id2") {
                    HideDropdown(event);
                };
            };
        });
    });
</script>

我已经重写了脚本内容，您需要确保将事件传递给 HideDropdown 否则它将无法访问它。

推荐阅读