JSFiddle - React, Tailwind, and code Playground

by kritya

HTML

<div class="check">Content
</div>
<div class='clickstatus'></div><div class='movestatus'></div>

CSS

div.check {
    border-style:solid;
    border-width:1px;
    width:500px;
    height:500px;
}

JavaScript

var clicked=false;
$("div").hover(function() {
    $(this).css("border-width", "2px")
}, function() {
    $(this).css("border-width","1px")
});
$("div").click(function() {
    $("div").unbind('mouseenter mouseleave');
    $(this).css("border-width", "3px")
});
$(document).click(function(e){
    if($(e.target).is('div'))return;
    alert("Po");
});
$("div").mousedown(function(){
    
});

$('div.check').mousedown(function(){
    clicking = true;
    $('.clickstatus').text('mousedown');
});

$("div.check").mouseup(function(){
    clicking = false;
    $('.clickstatus').text('mouseup');
    $('.movestatus').text('click released, no more move event');
})

$('div.check').mousemove(function(){
    if(clicking == false) return;

    // Mouse click + moving logic here
    $('.movestatus').text('mouse moved');
});
$("div.check").mouseout(function() {
    $(".mousestatus").text('Mouse out');
});