JSFiddle - React, Tailwind, and code Playground
HTML
<div id="foo" style="width: 50px; height: 50px; background: orange;"></div>
JavaScript
/* Example 1: Alt-Click on div#foo */
Element.Events.altClick = {
base: "click",
condition: function(e) {
return e.alt;
}
};
var clicks = 0;
$("foo").addEvent("altClick", function(e) {
clicks++;
this.set("text", clicks);
});
/* Example 2: Shift-H Shortcut */
Element.Events.shiftH = {
base: "keypress",
condition: function(e) {
if (e.shift && e.key == "h") { return true; }
}
};
window.addEvent("shiftH", function() {
var div = $("foo");
var opacity = (div.get("opacity") == 0 ? 1 : 0);
div.tween("opacity", opacity);
});