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*/
});
-
2Start by trying something, then come back when it failsadeneo– adeneo2014-01-10 14:51:31 +00:00Commented Jan 10, 2014 at 14:51
-
And don't forget to google Custom Context Menu on everything except “input” in jQuerytwil– twil2014-01-10 14:52:38 +00:00Commented Jan 10, 2014 at 14:52
-
I posted the code I've tried.Dimitar K. Nikolov– Dimitar K. Nikolov2014-01-10 14:55:36 +00:00Commented Jan 10, 2014 at 14:55
-
You need blocked right mouse click and show <div> with you custom contextmenu. I think you can just find jQuery plugin. By the way: developer.mozilla.org/en-US/docs/Web/HTML/Reference/…andychups– andychups2014-01-10 15:00:39 +00:00Commented Jan 10, 2014 at 15:00
Add a comment
|
3 Answers
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();
}
});
1 Comment
Taufik Nurrohman
e.target and e.srcElement return the same value.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");
}
});
Comments
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();
});
});
