JSFiddle - React, Tailwind, and code Playground

HTML

<div class="example">

</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>

CSS

.example{
  padding:10px;
  background:#00ff00;
  width:100px;
  height:100px;
}

JavaScript

var timer;
$(".example").on("mouseenter",function(e){
        timer=setTimeout(function(){ 
            // onmouseenter if not clicked
            $(".example").css({background:"red"});    // for testing
        }, 2000);
});

$('.example').click(function (event) {
    clearTimeout(timer);   // Don't call the onmouseenter
    $(".example").css({background:"blue"});    // for testing
});