Hey guys, I need to remove the "mouseenter" event after an element is clicked. I tried something like this but the event is not being removed. Can someone please tell me why? Below is the code snippet where I am attempting to do this in the enter() function:
TypeScript:
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();
Compiled JavaScript :
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();