JSFiddle - React, Tailwind, and code Playground

by johntrepreneur

HTML

<button id="btn1" type="button">mousemove off</button>
<div id="div1"></div>
<div id="div2"></div>

CSS

#div1, #div2 {
    float: left;
}
#div1 {
    height: 200px;
    width: 400px;
    background-color: lightgreen;
}
#div2 {
    height: 200px;
    width: 600px;
    background-color: lightyellow;
}
#btn1 {
    position: absolute;
}

JavaScript

function appendSpan(txt) {
    $('#div2').append($('<span></span>').text(' | ' + txt));
}

appendSpan('starting...');

$('#div1').on('contextmenu', function(e){
    e.preventDefault();
});

$('body').mouseup(function (event){
    appendSpan('mouseup fired');
});

$('#div1').mousedown(function(event){
	appendSpan('1');
	appendSpan('event.pageX=' + event.pageX);
    var $currentTarget = $(event.currentTarget);
    appendSpan('$currentTarget=' + $currentTarget.get(0).id);
	var mouseDownPageX = event.pageX;    
    $currentTarget.mousemove(function (e) {
        appendSpan('2');
        var diffX = e.pageX - mouseDownPageX;
        if (diffX <= 10 && diffX >= -10) {
            console.log('3');
            return;
        }
        $currentTarget.off('mousemove');
        appendSpan('4');
    });
	appendSpan('5');
});

$('#btn1').click(function(){
    $('#div1').off('mousemove');
    appendSpan('mousemove off clicked');
});