如何通过单击隐藏在 JavaScript 中的 div 来触发函数？

Posted 2023-02-21

【中文标题】如何通过单击隐藏在 JavaScript 中的 div 来触发函数？

【英文标题】：How can I trigger a function by clicking a div which is hidden in JavaScript?

【发布时间】：2015-06-08 02:32:05

【问题描述】：

我有一个 javascript 中的 div，最初是隐藏的。现在我希望通过猜测它的位置单击它时再次显示该 div，因为它对我不可见，但我无法触发 Javascript使其再次可见的功能。那么实现相同目标的替代方法是什么。

示例代码如下：

<div id="box"style="width:400px; height:300px; background-color:black; visibility:hidden" onclick="show(box)">

功能如下：

function show(id) 
document.getElementById(id).style.visibility = "visible";

但上面的方法不行，请建议另一种方法。

【参考方案1】：

我不会将显示设置为无或将可见性设置为隐藏，而是更改不透明度：

function show(id) 
    document.getElementById(id).style.opacity = 1;

<div id="box" style="width:400px; height:300px; background-color:black; opacity:0" onclick="show('box')">

另请注意，您的事件处理程序中需要引号 (onclick="show('box')")，否则浏览器会假定 box 是一个变量。

【讨论】：

是的，我知道，只是匆忙输入了示例代码。 :)

【参考方案2】：

您可以使用文档单击事件侦听器（或框的父级）并检查鼠标指针是否在框区域然后将可见性设置为可见。

document.addEventListener("click", (e) => 
    if (e.pageX <= 400 && e.pageY <= 300) 
         document.getElementById("box").style.visibility = "visible";
    
);