Custom Context Menu on everything except “input” in jQuery

Question

I want to add custom context menu with jQuery for the whole body of the page, except the textfields. How can I do that? I have tried that code:

$('body:not(input)').bind('contextmenu', function(){
    /*code*/
});

Answer 1

Check the srcElement before plugin executions. If it's not an input element, do trigger the contextmenu plugin:

$(document).on("contextmenu", function(e) {
    if (!$(e.srcElement).is(":input")) { // if it's not an input element...
        $(this).triggerTheContextMenuPlugin();
    }
});

Answer 2

Use an event listener on the document and check if it was initiated by an input element.

$(document).on("contextmenu", function (e) {
    if (e.target.tagName.toUpperCase() === "INPUT") {
        console.log("context menu triggered");
    }
});

Demo here

Answer 3

Inspired by Salman's solution.

You can stop the event propagation in all input elements, with the e.stopPropagation() function. In doing so, you keep the default behavior of the inputs elements:

$(function() {
    $(document).on("contextmenu", function(e) {
        alert("Context menu triggered, preventing default");
        e.preventDefault();
    });
    $("input").on("contextmenu", function(e) {
        e.stopPropagation();
    });
});

JSFiddle Demo