如何通过单击隐藏在 JavaScript 中的 div 来触发功能?

How can I trigger a function by clicking a div which is hidden in JavaScript?

我在 Javascript 中有一个 div,它最初是 hidden.Now 我希望这个 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";
}

但是上面的方法不行,请推荐一个替代方法。

我没有将显示设置为 none 或将可见性设置为隐藏,而是更改了不透明度:

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 是一个变量。

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

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