Question

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

我尝试手动添加触发器，并使用click（）触发。我尝试将click事件添加到所有子元素。我尝试使用addEvenListener（）。我试图更改div及其子元素的位置。这些配置都没有任何区别。当我将整个文档的位置设置为固定时，我只能使click事件起作用。我在用于格式化整个文档的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元素时触发一个函数。

Answer 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元素时，必须先删除eventListener，然后再从DOM中删除元素，然后在另一个DIV中创建元素后重新添加eventListener。

onClick事件仅在position：fixed时起作用。

1 个答案: