Question 43699 in Html Question posted in
Some basic documentation can be found here.

How to use addEventListener properly? – Html

    re2.addEventListener("mouseover", function(){
        const re21 = document.getElementById("reso");
        re21.style.position = "absolute";
        re21.style.top = "50%";
        re21.style.left = "50%";
        console.log("Exiting Listener- mouseOver");

        re3.addEventListener("mouseover", function(){
            const re22 = document.getElementById("reso");
            re22.style.position = "fixed";
            re22.style.top ="0px";
            re22.style.left="0px";
            console.log("Exiting Listener- mouseout");
    
          });

      });

I have an html div element with id as "reso".
what i want to do is to move this element from point A to point B whenever the mouse get on to that element. How can we do this?

when we execute the above javascript code. it only moves a single turn. Then we tried with a loop for i=0 to 10 wrapped the above code in it with some console logs. all the logs were printing.
but still the eventlisteners executed only once.

can you help us how to do this?

Tags:

3

Answers


  1. 0

    To move an element from point A to point B when the mouse hovers over it, you can use the mousemove event listener instead of mouseover, which only fires once when the mouse enters the element.

    const re21 = document.getElementById("reso");

re21.addEventListener("mousemove", function() {
  re21.classList.add("active");
});

re21.addEventListener("mouseleave", function() {
  re21.classList.remove("active");
});
    #reso {
  position: absolute;
  top: 50%;
  left: 50%;
  transition: transform 0.3s ease-out;
}

#reso.active {
  transform: translate(-50%, -50%);
}
    <div id="reso">Move me!</div>
    Login or Signup to reply.
  2. 0

    You may need to initialise a counter on an outer scope than your event callback function, then you increment it every time you trigger the event.

    const elm = document.getElementById("reso");

let initialTopPosition = 0;
let initialLeftPosition = 0;


function moveElement() {
  initialTopPosition++;
  initialLeftPosition++;

  elm.style.top = `${initialTopPosition}%`;
  elm.style.left = `${initialLeftPosition}%`;
  console.log("Exiting Listener- mouseOver");
};

elm.addEventListener("mousemove", moveElement);
    #reso {
  background-color: red;
  height: 100px;
  width: 100px;
  display: inline-block;
  position: absolute;
}
    <div id="reso"></div>
    Login or Signup to reply.
  3. 0

    you can use the mousemove event instead of the mouseover event. This will allow you to continuously update the position of the element as the mouse moves

    const re21 = document.getElementById("reso");
let isMoving = false;

re21.addEventListener("mousemove", function(event) {
  if (!isMoving) {
    isMoving = true;
    re21.style.position = "absolute";
    re21.style.top = `${event.clientY}px`;
    re21.style.left = `${event.clientX}px`;
  }
});

re21.addEventListener("mouseout", function() {
  isMoving = false;
});
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search