Order of Events

Blur, Mousedown, Mouseup & Click

by Unspecified

HTML

<input type="text" class="input" />
<button id="blah">Click me !</button>
<div class="res"></div>

JavaScript

var $res = $(".res");

$(".input").on("blur", function () {
    $res.append("Blurred ! <br>");
});

$("#blah")
    .on('mousedown', function (e) {
    $res.append('mousedown ! <br>');
    e.stopPropagation();
    e.preventDefault();
})
    .on('click', function () {
    $res.append("clicked <br>");
})
    .on('mouseup', function () {
    $res.append('mouse up ! <br>');
});