onClick 事件仅在 position:fixed 时有效；答案

【问题标题】：onClick event only works when position:fixed;onClick 事件仅在 position:fixed 时有效；
【发布时间】：2023-03-25 21:33:01
【问题描述】：

我将 onclick="alert('test');" 添加到我正在创建的 DIV DOM 元素中，并且 onclick 事件不起作用，除非我将整个文档的定位更改为固定。

我尝试手动添加触发器并使用 click() 触发。我尝试将点击事件添加到所有子元素。我尝试使用 addEvenListener()。我试图仅更改 div 及其子元素的位置。这些配置都没有任何区别。当我将整个文档的位置设置为固定时，我只能让点击事件起作用。我粘贴了格式化整个文档的 CSS 部分的下方，并粘贴了用于生成 HTML 代码的类。我不能使用固定定位，因为它不适用于我为游戏创建的网格，但绝对定位有效。

* {
    margin: 0px 0px 0px 0px;
    padding: 0px 0px 0px 0px;
    box-sizing: border-box;
    position: fixed;
}

class Card {
    constructor(suite, value){
        this.name = `${suite.suite}${value}`;
        this.value = value;
        this.suite = suite;
        this.face = false;
        this.element = this.element.bind(this);
        this.elementParent = this.elementParent.bind(this);
        this.symbol = this.symbol.bind(this);
        this.render = this.render.bind(this);
    }
    element(){
        return document.getElementById(this.name);
    }
    elementParent(){
        return this.element().parentElement;
    }
    symbol(){
        switch(this.value){
            case 11:
                 return "J";
            case 12:
                return "Q";
            case 13:
                return "K";
            case 1:
                return "A";
            default:
                return this.value;
        }
    }
    render(){
        let me = document.createElement("div");
        if(this.face){
            me.innerHTML = `<h2 class="topLeft" style="color:${this.suite.color};" onclick="alert('test')">${this.symbol()}</h3>
                        <h1 style="color:${this.suite.color};" onclick="alert('test')">${this.suite.symbol}</h3>
                        <h2 class="bottomRight" style="color:${this.suite.color};" onclick="alert('test')">${this.symbol()}</h3>`;
            me.classList.add("cardFront");
        } else {
            me.classList.add("cardBack");
        }
        me.style.position = "absolute";
        me.id = this.name;
        return me;
    }
    currentPOS(){
        return [this.element().top, this.element().left];
    }
}

我想在卡片的 DOM 元素被点击时触发一个函数。

【问题讨论】：

你能把你发布的代码变成minimal reproducible example，我们可以尝试运行吗？
好吧，我尝试制作一个紧凑的版本，我成功了。在小版本中，点击事件工作得很好。因此，较大的代码主体中有一些东西会干扰 click 事件的功能。真的，我只是希望有一些建议可以查看的地方或已知点击事件不起作用的情况。
在进一步玩弄代码之后，我发现当我将可点击的 DIV 嵌套在另一个 DIV 中时会出现问题。两个 DIV 都设置为position:absolute;，可点击的 DIV 在附加到正文时工作正常，单击事件工作正常，但当附加到 DIV 时，单击事件停止工作。
尝试给可点击的 DIV 更高的z-index。点击可能会转到不可点击的 DIV。
这是个好建议。我有父 DIV z-index: -1; 和孩子 z-index:2;，但它并没有解决问题。我尝试使用新的 html 来复制问题，但问题消失了，所以我的代码中有更深层次的东西导致了这个问题。我会继续切入，看看我能不能找出问题所在。

标签： javascript css

【解决方案1】：

经过更多的实验，我找到了解决方案。我试图创建一个 DOM 对象let me = document.createElement("div");，添加点击事件me.onclick = 'alert("Success!")';，然后将其附加到文档document.getElementById("div1").appendChild(me);"，但它不起作用。

我的解决方案是将 DOM 对象附加到文档 document.getElementById("div1").appendChild(me);"，然后添加点击事件 document.getElementById("me").addEventListener("click", tryMe); 它现在就像一个魅力。

现在，当我在 DIV 之间移动 DOM 元素时，我必须在从 DOM 中删除元素之前删除 eventListener，然后在另一个 DIV 中创建元素后重新添加 eventListener。

【讨论】：