gpt4 book ai didi

javascript - 有限制地在正文点击上调用 javascript 程序

转载 作者:行者123 更新时间:2023-11-30 09:19:28 25 4
gpt4 key购买 nike

我的网络项目在 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 is undefined”,因此它与条件语句有关:

<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 语句的同一程序运行时返回类型错误。

最佳答案

<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 否则它无法访问它。

关于javascript - 有限制地在正文点击上调用 javascript 程序,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/52671990/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com