Native ContextMenu On Demand

HTML

<div id="trigger">hit me</div>

CSS

#trigger {
    display: inline-block;
    padding: 25px;
    background: #EEE;
    border: 1px solit #999;
}

JavaScript

$(function(){

    $('#trigger').get(0).addEventListener('mousedown', function(e) {
        console.log("mousedown");
        
        // firefox wants the attribute set, property is not enough, apparently
        // this.contextmenu = 'foobar';
        this.setAttribute('contextmenu', 'foobar');
        
        if (document.getElementById('foobar'))
            return;
        
        console.log("adding menu");
        
        $('<menu type="context" id="foobar"><menuitem label="custom menu thingie" onclick="alert(\'yeah!\');"></menuitem></menu>').appendTo(document.body);
    }, true); // yes, capture phase
    
    $('#trigger').get(0).addEventListener('contextmenu', function(e) {
        console.log('context menu!');
    }, false);
})