JSFiddle - React, Tailwind, and code Playground

by freedawirl

HTML

<div id="testMouseEvents">Mouse Event Test Area</div>
<div id="log"></div>

CSS

#testMouseEvents { width: 100px; border: 1px solid #c2c2c2; margin: 10px; padding: 12px; font-size: 0.8em; }

#log { position: fixed; right: 0px; bottom: 2px; height: 100px; width: 300px; border: 1px solid blue; padding: 1px; font-size: 0.9em;}

JavaScript

$(function() {
    var $log = $('#log');
    $('#testMouseEvents').on('mousedown mouseup mouseenter mouseleave mouseover click dblclick', function(e) {
        $log.append(' ' + e.type);
        if (e.type == 'mousedown') {
            if (e.which == 1) {
                $log.append(' Left Button');
            } else if (e.which == 3) {
                $log.append(' Right Button');
            } else if (e.which == 2) {
                $log.append(' Middle Button');
            }
        }
    });
});