Question

伙计们，我想在点击一个元素后删除“mouseenter”事件我做了类似这样的事情，但那个事件不会删除你能告诉我为什么我在enter（）函数中执行此操作，请在下面进行检查

打字稿：

class Rate {
    public stars: any;

    constructor() {
        this.init()
    }

    init() {
        this.stars = document.querySelectorAll("#rating div");
        let self = this;
        for (let i = 0; i < this.stars.length; i++) {
            this.stars[i].setAttribute('count', i + 1);
            this.stars[i].addEventListener("mouseenter", this.enter.bind(self));
        }


    }

    enter(elm) {
        this.dochange(elm.target);
        let item = elm.target;
       // console.log(this);
        elm.target.addEventListener("click", function () {
            document.getElementById("note").innerHTML = elm.target.getAttribute('count');
            document.removeEventListener("mouseenter",function () {
                alert()
            })
        })
    }


    dochange(el) {

        for (let i = 0; i < this.stars.length; i++) {
            //  console.log(el.stars[i].getAttribute("count"))
            if (this.stars[i].getAttribute("count") > el.getAttribute("count")) {
                this.stars[i].classList.remove("fill")
            } else {

                this.stars[i].classList.add("fill")
            }
        }
    }
}

let obj = new Rate();

编译js：

var Rate = /** @class */ (function () {
    function Rate() {
        this.init();
    }
    Rate.prototype.init = function () {
        this.stars = document.querySelectorAll("#rating div");
        var self = this;
        for (var i = 0; i < this.stars.length; i++) {
            this.stars[i].setAttribute('count', i + 1);
            this.stars[i].addEventListener("mouseenter", this.enter.bind(self));
        }
    };
    Rate.prototype.enter = function (elm) {
        this.dochange(elm.target);
        var item = elm.target;
        // console.log(this);
        elm.target.addEventListener("click", function () {
            document.getElementById("note").innerHTML = elm.target.getAttribute('count');
            document.removeEventListener("mouseenter", function () {
                alert();
            });
        });
    };
    Rate.prototype.dochange = function (el) {
        for (var i = 0; i < this.stars.length; i++) {
            //  console.log(el.stars[i].getAttribute("count"))
            if (this.stars[i].getAttribute("count") > el.getAttribute("count")) {
                this.stars[i].classList.remove("fill");
            }
            else {
                this.stars[i].classList.add("fill");
            }
        }
    };
    return Rate;
}());
var obj = new Rate();

Answer 1

您没有使用removeEventListener（请参阅https://developer.mozilla.org/en/docs/Web/API/EventTarget/removeEventListener）

首先，您无法将监听器添加到div，然后将其从document中删除。您应该在您调用removeEventListener = this.stars [i] 的元素上调用addEventListener。

然后，一个元素可能有多个相同事件类型的侦听器，您必须指定要删除的侦听器。 removeEventListener的第二个参数应该与addded = this.enter 的侦听器相同。

this.stars[i].addEventListener("mouseenter", this.enter);
this.stars[i].removeEventListener("mouseenter", this.enter);

单击元素后删除EventListener不起作用

1 个答案: