Thursday

Mouse-up events don't happen from time to time

Issue

I wrote a code that rotates around if you move the mouse while holding it down and then stops when you release the mouse.

It was implemented as a mousedown and mouseup event.

But if you open the console window and try it many times,

'mousedown event' always happens well, but sometimes 'mousedown up' doesn't happen.

I've tried it many times, but I don't know what's causing it.

<!DOCTYPE html>
<html lang="ko">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title></title>

    <style>
        * {
            padding: 0;
            margin: 0;
        }

        body {
            font-family: "Malgun Gothic", dotum, sans-serif;
            padding: 30px;
        }

        li {
            list-style-type: none;
        }

        .wrapper {
            margin: 0 auto;
            width: 300px;
            height: 600px;
            box-shadow: 0px 0px 3px 0px rgba(25, 142, 177, 0.75);
            border-radius: 20px;
            padding: 20px;
            display: grid;
            grid-template-columns: 1fr 1fr 1fr 1fr;
            justify-items: center;
            align-items: center;


        }

        .item {
            width: 50px;
            height: 50px;
            box-shadow: 0px 0px 3px 0px rgba(188, 28, 105, 0.75);
            border-radius: 10px;

        }

        .item:hover {
            cursor: pointer;
        }

        .item:active {
            background-color: aliceblue;
        }

        .score {
            /* width: 200px;
            height: 50px;
            box-shadow: 0px 0px 3px 0px rgba(188, 28, 105, 0.75); */
            border-radius: 10px;
            margin: 20px auto;
            line-height: 50px;
            text-align: center;
        }

        .div_x,
        .div_y {
            display: inline-block;
            line-height: 30px;
            width: 60px;
            height: 30px;
            box-shadow: 0px 0px 3px 0px rgba(188, 28, 105, 0.75);
            border-radius: 5px;
            margin: 0 10px;
        }

        .div_reset {
            display: block;
            line-height: 30px;
            width: 120px;
            height: 35px;
            box-shadow: 0px 0px 3px 0px rgba(188, 28, 105, 0.75);
            border-radius: 5px;
            margin: 0 auto;
            text-align: center;
            font-size: 20px;
            padding: 0;

        }

        .div_reset:hover {
            background-color: rgb(221, 243, 243);
            cursor: pointer;
        }

        .div_reset:active {
            background-color: aqua;
        }
    </style>
</head>

<body>
    <script>
        let wrapperDiv = document.createElement("div");
        wrapperDiv.classList.add("wrapper");
        document.querySelector("body").appendChild(wrapperDiv);
        for (let i = 0; i < 20; i++) {
            let div = document.createElement("div");
            div.classList.add("item");
            document.querySelector(".wrapper").appendChild(div);
        }
        let div = document.createElement("div");
        div.classList.add("score");
        document.querySelector("body").appendChild(div);
        div.append("x : ");
        let div_x = document.createElement("div");
        div_x.classList.add("div_x");
        div.appendChild(div_x);
        div.append("y : ");
        let div_y = document.createElement("div");
        div_y.classList.add("div_y");
        div.appendChild(div_y);

        let div_reset = document.createElement("div");
        div_reset.classList.add("div_reset");
        document.querySelector("body").appendChild(div_reset);
        div_reset.innerText = "reset"



        let isMouseDown = false;
        let init_x, init_y;
        let last_x_point = 0, last_y_point = 0;
        let x_point, y_point;


        window.addEventListener("mousedown", function (e) {
            console.log("mouse down");
            isMouseDown = true;
            init_x = e.clientX;
            init_y = e.clientY;


        });


        window.addEventListener("mouseup", function () {
            console.log("mouse up");
            isMouseDown = false;
            last_x_point = x_point;
            last_y_point = y_point;
        });



        document.addEventListener("mousemove", function (e) {

            if (isMouseDown) {

                x_point = e.clientX - init_x;
                y_point = -e.clientY + init_y;

                wrapperDiv.style.transform = `rotateX(${(last_y_point + y_point) / 3}deg) rotateY(${(last_y_point + x_point) / 3}deg)`;

                div_x.innerText = ((last_y_point + y_point) / 3).toFixed(2);
                div_y.innerText = ((last_y_point + x_point) / 3).toFixed(2);
            }
        });

        div_reset.addEventListener("click", function () {
            last_x_point = 0;
            last_y_point = 0;
            wrapperDiv.style.transform = `rotateX(0deg) rotateY(0deg)`;


        });





    </script>
</body>

</html>

let wrapperDiv = document.createElement("div");
wrapperDiv.classList.add("wrapper");
document.querySelector("body").appendChild(wrapperDiv);
for (let i = 0; i < 20; i++) {
  let div = document.createElement("div");
  div.classList.add("item");
  document.querySelector(".wrapper").appendChild(div);
}
let div = document.createElement("div");
div.classList.add("score");
document.querySelector("body").appendChild(div);
div.append("x : ");
let div_x = document.createElement("div");
div_x.classList.add("div_x");
div.appendChild(div_x);
div.append("y : ");
let div_y = document.createElement("div");
div_y.classList.add("div_y");
div.appendChild(div_y);

let div_reset = document.createElement("div");
div_reset.classList.add("div_reset");
document.querySelector("body").appendChild(div_reset);
div_reset.innerText = "reset"



let isMouseDown = false;
let init_x, init_y;
let last_x_point = 0,
  last_y_point = 0;
let x_point, y_point;


window.addEventListener("mousedown", function(e) {
  console.log("mouse down");
  isMouseDown = true;
  init_x = e.clientX;
  init_y = e.clientY;


});


window.addEventListener("mouseup", function() {
  console.log("mouse up");
  isMouseDown = false;
  last_x_point = x_point;
  last_y_point = y_point;
});



document.addEventListener("mousemove", function(e) {

  if (isMouseDown) {

    x_point = e.clientX - init_x;
    y_point = -e.clientY + init_y;

    wrapperDiv.style.transform = `rotateX(${(last_y_point + y_point) / 3}deg) rotateY(${(last_y_point + x_point) / 3}deg)`;

    div_x.innerText = ((last_y_point + y_point) / 3).toFixed(2);
    div_y.innerText = ((last_y_point + x_point) / 3).toFixed(2);
  }
});

div_reset.addEventListener("click", function() {
  last_x_point = 0;
  last_y_point = 0;
  wrapperDiv.style.transform = `rotateX(0deg) rotateY(0deg)`;


});

* {
  padding: 0;
  margin: 0;
}

body {
  font-family: "Malgun Gothic", dotum, sans-serif;
  padding: 30px;
}

li {
  list-style-type: none;
}

.wrapper {
  margin: 0 auto;
  width: 300px;
  height: 600px;
  box-shadow: 0px 0px 3px 0px rgba(25, 142, 177, 0.75);
  border-radius: 20px;
  padding: 20px;
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr;
  justify-items: center;
  align-items: center;
}

.item {
  width: 50px;
  height: 50px;
  box-shadow: 0px 0px 3px 0px rgba(188, 28, 105, 0.75);
  border-radius: 10px;
}

.item:hover {
  cursor: pointer;
}

.item:active {
  background-color: aliceblue;
}

.score {
  /* width: 200px;
            height: 50px;
            box-shadow: 0px 0px 3px 0px rgba(188, 28, 105, 0.75); */
  border-radius: 10px;
  margin: 20px auto;
  line-height: 50px;
  text-align: center;
}

.div_x,
.div_y {
  display: inline-block;
  line-height: 30px;
  width: 60px;
  height: 30px;
  box-shadow: 0px 0px 3px 0px rgba(188, 28, 105, 0.75);
  border-radius: 5px;
  margin: 0 10px;
}

.div_reset {
  display: block;
  line-height: 30px;
  width: 120px;
  height: 35px;
  box-shadow: 0px 0px 3px 0px rgba(188, 28, 105, 0.75);
  border-radius: 5px;
  margin: 0 auto;
  text-align: center;
  font-size: 20px;
  padding: 0;
}

.div_reset:hover {
  background-color: rgb(221, 243, 243);
  cursor: pointer;
}

.div_reset:active {
  background-color: aqua;
}

I've tried several times to see under what conditions the mouse-up event is ignored to find out what causes it.

However, I can't even guess under what conditions an event is ignored.

Solution

It’s not a good idea to attach the mouse events to window but to a container that wraps the item to be rotated.

Apart from the weird behavior you described, with your method one can also hold down the mouse button even while over your program’s Reset button and it’ll still rotate the rectangle, and this behavior is just wrong.

Anyway, the next level down you can test is to replace window with document.body like this…

 document.body.addEventListener("mousedown", function (e) {
 });
 
 document.body.addEventListener("mouseup", function () {
 });

And although this eliminates the bizarre behavior you described, it’s still far from being good because one can still rotate when over the program’s reset button and XY output fields.

Therefore, use a DIV wrapper stretched to the screen as your first element (with an ID for easy access), that contains the rectangle to be rotated.

The X,Y,Reset elements should be created last but placed outside of the wrapper and absolutely positioned.

The listeners would now become:

 WrapperID.addEventListener("mousedown", function (e) {
 });

 WrapperID.addEventListener("mouseup", function () {
 });

If you follow this layout/method you will have eliminated both problems.

NB: As a rule of thumb you should never attach mouse events to window so I’m not surprised you have bizarre behavior. They should be attached to the body and/or elements.

Answered By - passingThru

This Answer collected from stackoverflow and tested by AngularFix community admins, is licensed under cc by-sa 2.5 , cc by-sa 3.0 and cc by-sa 4.0

Thursday

Mouse-up events don't happen from time to time

Issue

Solution

0 comments:

Post a Comment

Popular Posts

Labels