Error using the 'is' method

Question

I’m using the method is to check if, after a while, the mouse is inside or outside an element. However, for some reason, it is giving the following error:

Uncaught Typeerror: Aucon.is is not a Function

Part of the code:

let AuCon = document.getElementById('AudioConfig');

AuCon.addEventListener('mouseout', Para);
 
function Para() {
    setTimeout(function(){if(AuCon.is(':hover')){AniVoltar}}, 1000);
}

function AniVoltar()
{
  //Código irrelevante.
}

#AudioConfig
{
  display: inline-block;
  width: 50px;
  height: 50px;
  background-color: black;
}

<div id="AudioConfig">
  <!--Conteudo-->
</div>

In that code I literally did exactly as I was in documentation.

Answer 1

You are trying to use the method is jQuery on a native browser interface. Like this native interface nay implements the method is, you receive an error when trying to invoke something that is not a function.

Let’s see where the error is caused:

AuCon.is(':hover')

And according to this line:

let AuCon = document.getElementById('AudioConfig');

The variable AuCon was assigned with the result of the call to document.getElementById. In that case, AuCon will be a HTMLElement, which is the value returned by getElementById.

---

One option to solve this would be to use the jQuery API to search for that element. But is it really worth including the 30.4kB from jQuery for that reason?

No! : -) You can use the method matches, which was inspired by is jQuery and is already natively implemented by most browsers.

An example:

let AuCon = document.getElementById('AudioConfig');

AuCon.addEventListener('mouseout', Para);
 
function Para() {
  setTimeout(function() {
    if (AuCon.matches(':hover')) {
      AniVoltar()
    }
  }, 1000);
}

function AniVoltar() {
  console.log('Chamou.');
}

#AudioConfig {
  display: inline-block;
  width: 50px;
  height: 50px;
  background-color: black;
}

<div id="AudioConfig">
  <!--Conteudo-->
</div>

Note that jQuery was not necessary - so much so that it was not included in the code. :-)