Disable right click menu on click - javascript

I am trying to build a minesweeper game with php and jquery. This means I want the user to be able to right-click elements to mark areas as a potential bomb or a questionmark. Now I have the right click event and the code works, however if I don't alert anything I get the menu with inspect element etc. I've tried throwing in some return false's but they haven't helped. How can I stop the menu appearing on right-click?
$('.overlay').mousedown(function(event) {
switch (event.which) {
case 1:
//left click code
break;
case 3:
theID = event.target.id;
if ($('#'+theID).is(":visible") && $('.bomb_'+theID).css("visibility") == "hidden"
&& $('.mystery_'+theID).css("visibility") == "hidden"){
$('#'+theID).css("background", "none");
$('.bomb_'+theID).css("visibility", "visible");
alert("x");
}else if($('.bomb_'+theID).is(":visible")){
$('.bomb_'+theID).css("visibility", "hidden");
$('.mystery_'+theID).css("visibility", "visible");
alert("y");
}else{
$('.mystery_'+theID).css("visibility", "hidden");
$('#'+theID).css("background", "#fff");
alert("z");
}
break;
}
});
Have tried to add event.preventDefault(); under the mousedown function but this doesn't change anything. Also tried it under case 3:.
Also return false; and event.stopImmediatePropagation(); don't work.

Have you tried this via the context menu event?
$(".overlay").on("contextmenu",function(e){
....
e.stopImmediatePropagation();
e.preventDefault();
return false;
});

You might want to try event.preventDefault();

Related

Right Click Issue About Jquery

When I Right clicked in my Table Column. i get 3-5 alert screen. I Think there is any loop.. My Algorithms is When i clicked right get alert screen . if i press "OK" My Column is going to delete if i press "NO" My Column is not going to delete . But. When I press some options. I get 3-5 Alert screen too.. Can Anyone help me ?
$(".Stok_Satis").mousedown(function(ev) {
if (ev.which == 3) //mouse sağ click
{
id = $(this).attr("id");
alert(Sil);
if (confirm('Seçileni silmek istediğinize emin misiniz ?')) {
if (Sil < 1) {
Sil = 5;
$("#satissatir #" + id).remove();
removeByIndex(tablo, id);
alert(tablo);
i--;
return;
//return true ;
}
//Sil=false;
} else {
Sil++;
return;
//Sil=false;
//return false ;
}
} else if (ev.which == 1) //mouse sol click
{
alert("sol click");
}
});
Here is a working sample for you. Just attach your logic under case 3. You will see that left click is captured by jQuery event however no action is taken.
$('body').mousedown(function(event) {
switch (event.which) {
case 1:
break;
case 2:
alert('Middle Mouse button pressed.');
break;
case 3:
alert('Right Mouse button pressed.');
//Your code should come here
break;
default:
alert('Unknown mouse click action.');
}
});
<body>
Test
</body>
Fiddle: https://jsfiddle.net/c08nfp09/

Overlay div via jquery is set up successfully but not removed on click

I have one simple jquery script which triggers on click on button and create another div overlays on current html,i got success creating the div but the problem is when i try to close the div by a button which i have created at setting up overlay div is not working what can be the possible cause? the code is as under
input#btn cause the div to diplay and its working fine.
Jquery function file
$(document).ready(function(){
$('input#btn').click(function(){
var attr = $('#div').css('display');
alert(attr);
if(attr == 'none')
{
$('#div').css('display','block');
$('#div').html('<H1>PALAK MEVADA</H1><input id="close" type="button" value="CLOSE"/>');
}
return false;
});
$('input#close').click(function(){
var attr = $('#div').css('display');
alert(attr);
if(attr == 'block')
{
$('#div').css('display','none');
$('#div').html('');
}
return false;
});
});
Use on():
$(document).on('click','input#close',function(){
var attr = $('#div').css('display');
alert(attr);
if(attr == 'block')
{
$('#div').css('display','none');
$('#div').html('');
}
return false;
});
The button doesn't exist when your code is first initialized, so your $('input#close').click(); isn't bound to anything.
Try this:
$('input#close').on('click', function(){
// Your code here...
});

How to change mouse left click and right click option?

I have some set of HTML files named in sequence. Is it possible to assign mouse right click to next html page and mouse left click to previous html page and how to do this?
This is how we handles the mouse click..
$('#element').mousedown(function(event) {
switch (event.which) {
case 1:
alert('Left mouse button pressed');
//code to navigate to left page
break;
case 2:
alert('Right mouse button pressed');
//code to navigate to right page
break;
default:
alert('Mouse is not good');
}
});
$(function(){
$(document).mousedown(function(event) {
switch (event.which) {
case 1:
window.location.href = "http://stackoverflow.com" // here url prev. page
break;
case 3:
window.location.href = "http://www.google.com" // here url next. page
break;
default:
break;
}
});
})
And don't forgot add jquery library.
You can also do this with some simple Javascript.
<script type='text/javascript'>
function right(e){
//Write code to move you to next HTML page
}
<canvas style='width: 100px; height: 100px; border: 1px solid #000000;' oncontextmenu='right(event); return false;'>
//Everything between here's right click is overridden.
</canvas>
This is the traditional way to override left and right clicks. In the code I'm preventing event propagation of the right-click also so the context menu won't display.
JSFiddle
window.onclick = leftClick
window.oncontextmenu = function (event) {
event = event || window.event;
if (event.stopPropagation)
event.stopPropagation();
rightClick();
return false;
}
function leftClick(event) {
alert('left click');
window.location.href = "http://www.google.com";
}
function rightClick(event) {
alert('right click');
window.location.href = "http://images.google.com";
}

Listen to undo/redo event in contenteditable div

Is there a way to listen on all the ways a user could trigger an undo on a contenteditable div? For example when the user hits Control+Z, Right-click -> Undo, or in the file menu Edit -> Undo.
I'm not looking for undo/redo algorithms or implementations, just the ability to listen to the event and overwrite the behavior.
You can get event.inputType of input event. Check for "historyUndo" / "historyRedo":
var div = document.getElementById("mydiv");
div.addEventListener("input", function(e) {
switch(e.inputType){
case "historyUndo": alert("You did undo"); break;
case "historyRedo": alert("You did redo"); break;
}
});
<div id="mydiv" contenteditable="true">Hello world!</div>
In recent browsers, you can cancel the event using the beforeinput event (not in Firefox yet):
var div = document.getElementById("mydiv");
div.addEventListener("beforeinput", function(e) {
switch(e.inputType){
case "historyUndo": e.preventDefault(); alert("Undo has been canceled"); break;
case "historyRedo": e.preventDefault(); alert("Redo has been canceled"); break;
}
});
<div id="mydiv" contenteditable="true">Hello world!</div>
References:
InputEvent specification and other inputType values: https://w3c.github.io/input-events/#interface-InputEvent-Attributes
Browser compatibility for beforeinput: https://caniuse.com/#feat=mdn-api_htmlelement_beforeinput_event
Well, the Ctrl+Z/Y is possible, but I don't know about the Right-click->Undo/Redo part.
$(document).keydown(function (e) {
var thisKey = e.which;
if (e.ctrlKey) {
if (thisKey == 90) alert('Undo');
else if (thisKey == 89) alert('Redo');
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
Control z example at How to detect Ctrl+V, Ctrl+C using JavaScript?
for rightclick you can show a div on a right click How can I capture the right-click event in JavaScript?
then when they click the undo option on the div. just put in a onclick function.

Prevent window scroll jquery

I'm developing a select menu replacement in jquery.
First I've to make the new select menu focusable by just adding tabindex="0" to the container.
Then, I disable focus on the original select menu and give focus to the new one.
When the new one is focused and you press the up and down arrows the options change accordingly but there's a big problem. As you press the arrows the body moves too.
I tried all these solutions so far with no luck:
$(window).unbind('scroll');
$(document).unbind('scroll');
$('body').unbind('scroll');
$(window).unbind('keydown');
$(document).unbind('keydown');
Check the code here http://pastebin.com/pVNMqyui
This code is from the development version of Ideal Forms http://code.google.com/p/idealforms that I'm about to release soon, with keyboard support.
Any ideas why this is not working?
EDIT: Solved!
Found the answer on this post jquery link tag enable disable
var disableScroll = function(e){
if (e.keyCode === 40 || e.keyCode === 38) {
e.preventDefault();
return false;
}
};
// And then...
events.focus: function(){ $(window).on('keydown', disableScroll); }
events.blur: function(){ $(window).off('keydown', disableScroll); }
It works!
In your keydown handler, for up and down keys, return false like this:
'keydown' : function (e) {
if (e.keyCode === 40) { // Down arrow
that.events.moveOne('down');
}
if (e.keyCode === 38) { // Up arrow
that.events.moveOne('up');
}
return false;
}
Also, make sure this return gets propagated to the browser's native onkeydown depending on how/which framework you're using.
Found the answer on this post jquery link tag enable disable
var disableScroll = function(e){
if (e.keyCode === 40 || e.keyCode === 38) {
e.preventDefault();
return false;
}
};
// And then...
events.focus: function(){ $(window).on('keydown', disableScroll); }
events.blur: function(){ $(window).off('keydown', disableScroll); }
You need to cancel the keydown event for arrow keys. Use either e.preventDefault() or return false in your .keydown() handler if an arrow key has been pressed.
Its very simple.you need not even need jQuery for this.
jQuery:
$("body").css("overflow", "hidden");
javascript
<body style="overflow: hidden">
Adding in style:
<style>
body {width:100%; height:100%; overflow:hidden, margin:0}
html {width:100%; height:100%; overflow:hidden}
</style>
if you want to bind the arrow keys,try something like:
$('body').keydown(function(e){
e.preventDefult();
if(e.keyCode == 37) // for left key
{
// implement focus functionality
}
if(e.keyCode == 38) // for up key
{
// implement focus functionality
}
if(e.keyCode == 39) // for right key
{
// implement focus functionality
}
if(e.keyCode == 40) // for doqn key
{
// implement focus functionality
}
});
The Best way to achive the same is to set overflow of the body to hidden
$("body").css("overflow", "hidden");
After the process just do the opposite
`$("body").css("overflow", "hidden");

Categories