How to make a div disappear when someone uses a touch screen device?

Question

I'm trying to make an div which follows your cursor but I want it to like, disappear if someone uses a touch screen device. Is it possible to do this with only CSS or plain JAVASCRIPT?

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      *,
      *::after,
      *::before {
        margin: 0;
        padding: 0;
        box-sizing: border-box;
      }

      body {
        display: flex;
        align-items: center;
        justify-content: center;
        height: 100vh;
        overflow: hidden;
        background: #111;
      }

      #box {
        position: fixed;
        z-index: 824809238;
        border-radius: 50%;
        width: 50px;
        height: 50px;
        border: 3px solid dodgerblue;
        top: var(--y);
        left: var(--x);
        transform: translate(-50%, -50%);
        filter: drop-shadow(0px 0px 10px rgba(255, 255, 255, 0.5));
        animation: animate 2s linear infinite;
      }

      @keyframes animate {
        0% {
          filter: hue-rotate(0deg);
        }

        100% {
          filter: hue-rotate(360deg);
        }
      }
    </style>
  </head>
  <body>
    <div id="box"></div>
    <script>
      let box = document.getElementById("box");

      window.addEventListener("mousemove", (e) => {
        box.style.top = `${e.clientY}px`;
        box.style.left = `${e.clientX}px`;
        box.style.opacity = "1";
      });

      window.addEventListener("mouseout", () => {
        box.style.transition = "opacity 0.5s ease";
        box.style.opacity = "0";
      });
    </script>
  </body>
</html>

This is my code but I have no idea how to make it disappear with touch screen devices as I said.

Any Ideas?

`touch` in mobile devices should be same as `click` event I guess (In general it is, if not wrong), so simply do the same code as "mousemove" putting inside "click" should work — KcH, Mar 30 '22 at 07:41
Does this answer your question? [What's the best way to detect a 'touch screen' device using JavaScript?](https://stackoverflow.com/questions/4817029/whats-the-best-way-to-detect-a-touch-screen-device-using-javascript) — Youssouf Oumar, Mar 30 '22 at 07:41
it is possible to detect a touch device with pure css up to a certain point using media queries. Please have a look at this [article](https://ferie.medium.com/detect-a-touch-device-with-only-css-9f8e30fa1134) . — toffler, Mar 30 '22 at 07:41

score 1 · Accepted Answer · answered Mar 30 '22 at 07:42

1

Use touchstart/touchend events:

    window.addEventListener("touchstart", () => {
      box.style.display = 'none';
    })
    window.addEventListener("touchend", () => {
      box.style.display = 'block';
    })

answered Mar 30 '22 at 07:42

Jared

1,294
2
8
13

How to make a div disappear when someone uses a touch screen device?

1 Answers1