So I posted a answer to this question Disable mouse scroll middle click event with jQuery
And came up with this solution. I know how to solve this problem, but I just cant understand why this behavior is happening
document.onmousedown= function (e) {
if( e.which == 2 ) {
e.preventDefault();
alert("middle button pressed, dont open");
}
}
click here
After some time a got a comment saying it doesn't work when removing the alert(), so i tested it and he was right. Now the tab is opened on middle mouse click
document.onmousedown= function (e) {
if( e.which == 2 ) {
e.preventDefault();
}
}
click here
What is causing this behavior? First i thought it was a chrome feature/bug but it's the same behavior with edge and IE
Related
I noticed that these function doesn't work good in Firefox, but does in Chrome.
I use these function in a game in Js to shoot bullet (left mouse click) and to create a fireball all around the player with the right click that burns everyone in a small radius.
document.onclick = function(event) {
if(!player){ //to avoid onclick to be used before calling Player();
return;
}
if(player.canAttack && player.distance >= 80) { //not for sword attack
performAttack(player);
player.canAttack = false;
}
if(player.distance < 80)
performAttack(player);
//event.preventDefault();
}
document.oncontextmenu = function(event) {
//hide default behaviour of right click -> no context menu popup
event.preventDefault();
if(player.obtainedGadjet > 0) {
player.pressingMouseRight = true;
performSpecialAttack(player);
}
}
In the performAttack function I set player.isStopped = true, so my updatePlayer() doesn't change player.x and player.y while he's attacking. The same for the fireball attack. I want my player stays there.
It works in chrome, my player stops, attacks,and then can moves again, but in Firefox if I right click it somethimes acts instead as I have left clicked, so shoot the magic ball, and maybe then the fireball too. Furthermore, my player ignore isStopped = true, it seems like in Firefox oncontextmenu has "lower priority" than other events.
Any idea?
Thanks
Please note that a click event contains information about which button was pressed. You can try yourself with something like:
document.addEventListener('click', function(ev){
console.log(ev.button);
});
And, yes, click events are fired when you right-click, even if you're doing something on related contextmenu events.
So your code should look a bit more like
document.addEventListener('click', function(ev){
if (ev.button === 0) {
// Perform primary action
} else if (ev.button === 2) {
// Perform secondary action
}
});
document.addEventListener('contextmenu', function(ev){
ev.preventDefault();
});
Using the same click event is advisable as said by Ivan. You may also want to read this other discussion here on SO about best practices and why it's not always good to disable default right click behaviour (i.e.: it's not always guaranteed to work).
In my game, when I hold down the left mouse and move it around, the game will become very slow. Although the right mouse button has the exact same function, doing the same with right click does not cause the game to slow down. Tested in Mozilla Firefox, IE 10, and Google Chrome, all with same results.
I'm not going to provide code right now because I don't see any way it could be related to the code, although I don't remember this happening before.
Here's the mousedown code showing I am using the same methods and left click makes the game run slow, right click does not.
function domousedown(e) {
if(e.which == 1) {
clearInterval(mousedownID);
rightmousedown(e);
mousedownID = setInterval(function() {
this.rightmousedown(e);
}, 500);
} else if(e.which == 3 || e.button == 2){
clearInterval(mousedownID);
rightmousedown(e);
mousedownID = setInterval(function() {
this.rightmousedown(e);
}, 500);
}
//return false;
e.preventDefault();
}
Does anyone know why this is happening? Any help is appreciated.
Thanks!
Edit: Found the issue, although I still don't understand why it's only on left click. Apparently with a lot of mousemove events then holding down left click and pressing other buttons, it causes the game to slow down. To prevent it I'll need to rewrite some mousedown methods.
When calling event.button on mouseup jQuery event, it normally returns 0 for left click and 2 for right click.
However, if you press and hold left click, then right click, event.button always returns 2 after releasing left click. This makes it impossible to determine which click was released first until both clicks are released. Same problem with event.which.
Anyone have a workaround for this? Can't seem to find any reports of this bug.
Edit: I know how to normally determine which key is being released. The problem is mouseup is reporting wrong values. To reproduce this problem:
Press and hold left-click.
Press and hold right-click.
Release left-click.
This triggers mouseup event.
Call event.button
Expectation: 0,
Actual: 2
I think you use:
<script type="text/javascript">
$(document).ready(function(){
$(document).mousedown(function(e){
if( e.button == 2 ) {
alert('Right mouse click.');
return false;
}
if(e.button == 0) {
alert('Left mouse click.');
return false;
}
return true;
});
});
I'm trying to disable the mouse right click option. So i used contextmenu bind function to prevent it. This works fine but when shift is pressed along with the mosue right click the contextmenu bind function is not triggering but it shows the contextmenu. Means am not getting the alert but it shows the menu.
Here is the code i tried.
$(document).ready(function(){
$(document).bind("contextmenu",function(e){
alert('Context Menu event has fired!');
return false;
});
});
In order to capture the shift button press and mouse right click am doing the below code but this doesn't help. May be i am doing something wrong.
$(document).ready(function(){
$(document).bind("contextmenu",function(e){
alert('Context Menu event has fired!');
return false;
});
var shift = false;
jQuery(document).on("keydown", function(event) {
//check for shift key is pressed
if (event.which === 16) {
shift = true;
}
});
jQuery(document).mousedown(function(e) {
// e.which === 3 is for mouse right click
if (e.which === 3 && shift === true) {
console.log("both action are triggered");
return false; // how to stop the contextmenu action here
}
});
});
I tried giving the e.preventDefault instead of return false. I think the context menu event itself is not triggering in firefox when shift is clicked.
How to disable the mouse right click in this situation for firefox? Any help or clue will be much helpful
JSFIDDLE
NOTE
This is not happening in chrome. This is happening in firefox only. Is this a bug?
It's not a bug, it's a feature!
http://www.whatwg.org/specs/web-apps/current-work/multipage/interactive-elements.html#context-menus
User agents may provide means for bypassing the context menu
processing model, ensuring that the user can always access the UA's
default context menus. For example, the user agent could handle
right-clicks that have the Shift key depressed in such a way that it
does not fire the contextmenu event and instead always shows the
default context menu.
You will not be able to do this in Firefox, by design. It's annoying, especially for complex web apps and games, but it's hard-coded into the browser and there's not way to disable it in javascript (that I know of).
Blame the standards, not Mozilla.
Javascript code to disable mouse right click
<script language="javascript">
document.onmousedown=disableRightclick;
status="Disabled";
function disableRightclick(event)
{
if(event.button==2)
{
alert(status);
return false;
}
}
</script>
On the HTML Body tag set the oncontextmenu property to false.
<body oncontextmenu="return false">
...
</body>
Disclaimer: The link provided is the blog which i have written. Hope
this solves the problem.
I have an application where I am using the space bar to toggle a function anywhere in the window. However, if any other button or checkbox has focus, then that gets clicked as well.
I tried preventDefault() but that didn't work out as expected. How can I ensure that no other element on the screen gets clicked when I press the spacebar?
HTML
<button class="buttons" id="playBtn">PLAY</button>
JS (Updated according to Using prevent default to take over spacebar
$(document).keypress(function(event){
var keycode = (event.keyCode ? event.keyCode : event.which);
if(keycode == '32') {
if (event.stopPropagation) {
event.stopPropagation();
event.preventDefault();
}
playBtn_DOM.click();
} else if (keycode == '97') {
event.preventDefault();
prevBtn_DOM.click();
} else if (keycode == '100') {
event.preventDefault();
nextBtn_DOM.click();
}
});
And with respect to answer Using prevent default to take over spacebar, that solution didn't work. I have updated the JS code to show that I tried including the solution given there.
I also had this problem and after a bit of fiddling found that it's keyup that triggers button clicks. I've made a fiddle that demonstrates this: https://jsfiddle.net/Beppe/o6gfertu/1/. It works in Firefox and Chrome, although in the latter the button changes appearance to look pressed.
Simply use
$(element).blur();
to unfocus any element (like button) when it is focused (like click event for button).
For those who are expecting SPACE in some text input within clickable DIV. Try this:
HTML:
<div id="someClickableDiv" onclick="doSomething()">
<textarea onkeyup="event.preventDefault()"></textarea>
</div>
Or Angular 6 version:
<div id="someClickableDiv" (click)"doSomething()">
<textarea (keyup)="$event.preventDefault()"></textarea>
</div>
This will remove focus from all buttons as soon as they are focused (e.g. by a click). This will prevent spacebar from ever activating buttons.
document.querySelectorAll("button").forEach( function(item) {
item.addEventListener('focus', function() {
this.blur();
})
})
I found a relatively hacky solution to this. Better answers are most welcome!
$(document).mousemove(function(event){
if (document.activeElement != document.body) document.activeElement.blur();
});
Basically, it checks if mouse is anywhere in document's body. If yes, then it blurs any other element that has focus.