Html – How can I reset a div to its initial values when the document element in javascript is clicked

There are several problems here. I will try to go through them. These points reference the code at the bottom.

Broken Event Listener Removal

There was a fundamental misunderstanding of event listeners in the original code. Take the following snippet:

listener = thing.addEventListener(...

Here listener will be undefined since addEventListener does not return anything at all; therefore, this can not be used with removeEventListener. When you do, nothing will happen. The events will still be attached.

The usual way of removing events involves keeping around the handler function and then calling removeEventListener with that.

However, this is a bit painful in this situation. So there is another, more ergonomic, option for this situation where you can use an AbortController to kill off multiple listeners in one go.

Here, we create an AbortController before we register the events we want to cancel (and keep it in shared scope at the top of the file), and then we pass that with the addEventListener. We can then later use this abort controller to signal to all the listeners that they should be removed.

Note we can’t reuse an AbortController hence it is assigned a new one each time the events are about to be registered. The reason for that is once an abort controller has had abort() called, it remains in an aborted state and can not go back.

Mitigation of event propagation

Another issue that manifests when the above is fixed is that when the ball is clicked the function which adds the events and the function that removes them are called in quick succession. So the handlers are added and immediately after, removed again, without any additional use input.

That’s because the document handler for click where you currently do the reset stuff will receive an event when clicking on a ball to turn it on as well, even though the ball itself has a separate click handler.

That’s because events propagate. Events like click are fired on every ancestor element, all the way up to document. This is also sometimes called "event bubbling".

This can be fixed by calling e.stopPropagation(); in the ball click handler, so that doesn’t inadvertently also trigger a click event on the document which would subsequently remove all the ball handlers when you were trying to do the opposite.

The reason this seemingly wasn’t an issue before is because the removal of the event listeners wasn’t working anyway, as explained above.

Resetting styles

The resetting of the styles was unnecessarily complex. When you do thing.style.whatever = 'whatever' you are setting inline styles on the elements style DOM attribute, which take precedence over whatever styles there are associated with the element in the CSS stylesheets. It looks like the elements don’t start out with any inline styles in the base HTML, they just use the styles from the CSS stylesheets by default.

This means we can get back to the original styling by simply removing all the inline styles that have been applied like currentCursorBallEl.removeAttribute("style");. The element will then just adopt whatever was in the original stylesheet again, because then there are no inline styles overriding those rules, which are always there untouched no matter what you do with thing.style in the script.

You didn’t previously keep a currentCursorBallEl in the shared scope so I added that. This also supplanted the need for the ballIsOn var since we can know that by just knowing if currentCursorBallEl is set (not null) and using that.

Remaining Glitchy Behavior

This is reaching somewhat outside of the question title, but I will go over it for completeness.

You’ll notice sometimes the cursor is glitchy, like sometimes not appearing over the content it should until you move the cursor out and back in again. This is due to the way you create timeouts that overlap and are not cancelled or buffered appropriately.

When you move the cursor quickly over the page, a mouseout event from a previously hovered element can end up firing after the mouseover or mousemove for a newly hovered element. This then inadvertently sets the wrong style values.

Your original motivation for the timers was probably because, without them, the element does not follow correctly until the cursor stops moving, or at least slows down.

The reason that was a problem in the first place is that when the cursor is moving, many (hundreds, possibly thousands) of mousemove events are triggered. This causes the styles of the element to change rapidly, and the browser (especially with the attached animation) simply does not have time to keep up with that many paints.

The solution is to introduce requestAnimationFrame to replace setTimeout. This will fire when the browser is ready to paint. When you combine that with some bool that prevents a new animation frame relating to mousemove from being registered whilst another was already was pending, you avoid triggering too many style changes faster than the browser can paint them. At the same time though, you also avoid delaying them for too long.

We also requestAnimationFrame on the other handlers as well, which ensures all the style changes fire in a predictable order.

const cursorExplainingDiv = document.querySelector(".cursor-explaining-div");

let controller;
let currentCursorBallEl = null;

const landingBallVar = function landingBalls(e) {
  if (currentCursorBallEl === null) {
    controller = new AbortController();
    currentCursorBallEl = e.target;

    currentCursorBallEl.style.width = "30px";
    currentCursorBallEl.style.height = "30px";
    currentCursorBallEl.style.zIndex = "99";
    currentCursorBallEl.style.opacity = "1";
    currentCursorBallEl.style.transition = ".1s ease";
    currentCursorBallEl.style.pointerEvents = "none";

    let x = e.clientX;
    let y = e.clientY;
    currentCursorBallEl.style.left = x - 15 + "px";
    currentCursorBallEl.style.top = y - 15 + "px";

    let isThrottled = false;
    window.addEventListener(
      "mousemove",
      function (e) {
        if (!isThrottled) {
          isThrottled = true;
          let newX = e.clientX;
          let newY = e.clientY;
          requestAnimationFrame(() => {
            currentCursorBallEl.style.left = newX - 15 + "px";
            currentCursorBallEl.style.top = newY - 15 + "px";
            isThrottled = false;
          });
        }
      },
      { signal: controller.signal }
    );

    const allBodyEl = {
      h1: document.querySelectorAll("h1"),
      h2: document.querySelectorAll("h2"),
      p: document.querySelectorAll("p"),
      button: document.querySelectorAll("button"),
      img: document.querySelectorAll("img"),
    };

    for (const key in allBodyEl) {
      const elements = allBodyEl[key];
      elements.forEach((element) => {
        element.addEventListener(
          "mouseover",
          function (e) {
            requestAnimationFrame(() => {
              currentCursorBallEl.style.width = "40px";
              currentCursorBallEl.style.height = "40px";
              currentCursorBallEl.style.backgroundColor = "#bc7025";
              let newX = e.clientX;
              let newY = e.clientY;

              currentCursorBallEl.style.left = newX - 10 + "px";
              currentCursorBallEl.style.top = newY - 20 + "px";
            });

            // console.log(cursorExplainingDiv);
          },
          { signal: controller.signal }
        );

        element.addEventListener(
          "mouseout",
          function () {
            requestAnimationFrame(() => {
              currentCursorBallEl.style.width = `30px`;
              currentCursorBallEl.style.height = `30px`;
              currentCursorBallEl.transition = ".1s ease";
              currentCursorBallEl.style.backgroundColor = "";
              currentCursorBallEl.innerHTML = "";
            });
          },
          { signal: controller.signal }
        );
      });
    }
  }
};

function resetBallToInitialState(e) {
  currentCursorBallEl.removeAttribute("style");
  currentCursorBallEl = null;
  controller.abort();
}

document.addEventListener("click", (e) => {
  if (currentCursorBallEl !== null) {
    resetBallToInitialState(e);
  }
});

for (let i = 1; i <= 4; i++) {
  const ball = document.getElementById("ball" + i);
  if (ball) {
    console.log(ball);
    ball.addEventListener("click", function (e) {
      e.stopPropagation();
      landingBallVar(e);
    });
  }
}