JSFiddle - React, Tailwind, and code Playground

by letanure

HTML

<div id="teste"></div>

CSS

#teste{
    width: 50%;
    height: 100px;
    margin: 50px auto;
    border: 1px solid red;
    background-color: #622;
}

JavaScript

$('#teste').on('click',     function(e){ console.log( 1, e.type ); }); // 3
$('#teste').on('mousedown', function(e){ console.log( 2, e.type ); }); // 1
$('#teste').on('mouseup',   function(e){ console.log( 3, e.type ); }); // 2
$('#teste').on('click',     function(e){ console.log( 4, e.type ); }); // 4

// Alterando a ordem

// Salva eventos originais de click
var eventosOriginais = jQuery.extend( true, {}, $._data($("#teste")[0], "events").click );
// Apaga os eventos
$('#teste').off('click')
// readiciona os eventos na ordem desejada
$('#teste').on('click', function(e){ 
    eventosOriginais[1].handler(e);
    eventosOriginais[0].handler(e);
})