How can I enable and disable mouseover events?

Question

I need to enable and disable mouse over event for the rectangle created using d3. I have added these events line below:

d3.selectAll("rect").call(d3.drag().on("drag", (d, i, n) => {
this.dragRectangles(d, i, n);
}))                 
.on("mouseover", mouseover)
.on("mouseleave", mouseleave)
.on("mousemove", mousemove);

var mouseover = (d, i, n) => {
this.svgMouseOver(tooltip, d, i, n);
}

var mouseleave = (d, i, n) => {
this.svgMouseleave(tooltip, d, i, n);
}

var mousemove = (d, i, n) => {
this.svgMouseMove(tooltip, d, i, n);
}

Answer 1

I found below solution to enable or disable the mouse events

//To disable the mouse event for the rectangle.

d3.selectAll("rect").attr("pointer-events", "none");

//To Enable the mouse event for the rectangle.

d3.selectAll("rect").attr("pointer-events", "all");