How to check the absence of a pointing device on the page on desktops?

Question

In a project that aims to work only on desktop devices (desktop PC or notebook) it is mandatory to use a mouse (or pointing device, which can be a touchpad).

If the user accesses from a mobile device (touch), I redirect to a page stating that the page is only functional on a desktop device. That’s not the problem.

The goal is that if the user accesses from a desktop without a pointing device, all page elements are removed and displayed a warning box as below:

$(function(){
   
//   if(aqui verifico se existe um mouse!){
   
   // se não existe, removo os elementos da página
   // e aplico as propriedades abaixo:

   $("#bg").css("filter", "blur(5px)");
   $("#alerta").show();
   
//   }
   
});

body{
   margin: 0;
   display: flex;
   justify-content: center;
   align-items: center;
   height: 100vh;
}

#bg{
   position: fixed;
   width: 100vw;
   height: 100vh;
   background-image: url(https://images.unsplash.com/photo-1493246507139-91e8fad9978e?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&w=1000&q=80);
   background-size: cover;
}

#alerta{
   display: none;
   position: fixed;
   width: 300px;
   padding: 20px;
   background-color: #FFFEC5;
   border: 1px solid #000;
   text-align: center;
}

#alerta h2{
   margin-top: 0;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="bg"></div>
<div id="alerta">
   <h2>Não foi detectado um mouse!</h2>
   É necessário um dispositivo apontador pra usar este site. Conecte-o à uma porta USB e tecle F5.
</div>

What I need is to check on this if below the absence of the pointing device:

if(mouse não existe){
   // código pra remover todos os elementos
   // e aplicar as propriedades abaixo:
   $("#bg").css("filter", "blur(5px)");
   $("#alerta").show();
}

It is possible to check - and how, in Javascript, the absence of the mouse or mouse icon on the screen to then run the code inside the if quoted?

Answer 1

There is a CSS-only solution for this, and you will use @media (pointer: none); in case there is no pointer input show or hide the div

Look at the image, first I enter the normal page, give a refrash etc, then I open a new flap, lap the same link and disconnect mine mouse, note that the pointer of mouse will disappear, there when I squeeze enter to enter the page he no longer recognizes the mouse and shows the div.box.

In the model above I hide the H1 and show the div.box if the user does not have a mouse connected.

The observation is, in case you want to test vc need to remove the mouse, and open the html in another window, because here at least the feedback of this type of @media it was not instant, it seems that the browser has to update to realize that it is without active mouse.

Code of the image above:

html, body {
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
}

.box {
  margin: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  display: none;
}

#bg{
  position: fixed;
  width: 100vw;
  height: 100vh;
  background-image: url(https://images.unsplash.com/photo-1493246507139-91e8fad9978e?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&w=1000&q=80);
  background-size: cover;
  filter: blur(5px);
}

#alerta{
  /* display: none; */
  position: fixed;
  width: 300px;
  padding: 20px;
  background-color: #FFFEC5;
  border: 1px solid #000;
  text-align: center;
}

#alerta h2{
  margin-top: 0;
}

@media (pointer: none) {
  h1 {
    display: none;
  }
  .box {
    display: block;
  }
}

  

<h1>Olá bem vindo, vejo que seu Rato está conectado!</h1>


<div class="box">
  <div id="bg"></div>
  <div id="alerta">
    <h2>Não foi detectado um mouse!</h2>
    É necessário um dispositivo apontador pra usar este site. Conecte-o à uma porta USB e tecle F5.
  </div>
</div>

Here’s the Mozilla documentation on the @media pointer:
https://developer.mozilla.org/en-US/docs/Web/CSS/@media/Pointer

Answer 2

There is a Javascript API called matchMedia() that returns an object Mediaquerylist with a boolean property matches returning true if it meets the specified media string or false otherwise.

In the case of the mouse, the string would be (pointer:fine):

matchMedia("(pointer:fine)").matches

So when I opened the page, I would do this:

if(!matchMedia("(pointer:fine)").matches){
   $("#bg").css("filter", "blur(5px)");
   $("#alerta").show();
}

That is, if the matches return false, the if is met (there is no pointing device).

Obs.: the return of matchMedia() is stored in memory when opening the page. If you connect or disconnect the mouse after opening the page, the value does not change. It will be necessary to close the tab and open it again. In this case, I would have to change the text of the warning box instructing the user to close and open the site, and not just type F5.