Go to kitchensink, using middle button of mouse, try to click and hold the mouse on empty area of canvas and move the mouse.
The selection rectangle is displayed. How to disable this? I ask because, I have middle mouse button click and drag bound to canvas pan in previous version of fabric. Upgrading to new version, the canvas is behaving in unexpected manner.
I've tried to disable selection on the canvas on mouse down if the event.button == 1 by doing canvas.selectable = false; in mousedown and set it to true back in mouseup event handler.
That didn't work.
Any ideas how to disable the selection using middle mouse button click and drag?
The problem is that fabric recently enabled click for other button rather than left.
The point is that left is handled, right is handled, middle is not...
I guess the middle button follow the flow of the left button just because it is not the right one.
here a snippet from the mousedown handler function of fabric as at version 1.7.3 ( current as feb 2017 ).
__onMouseDown: function (e) {
var target = this.findTarget(e);
// if right click just fire events
var isRightClick = 'which' in e ? e.which === 3 : e.button === 2;
if (isRightClick) {
if (this.fireRightClick) {
this._handleEvent(e, 'down', target ? target : null);
}
return;
}
... continue normal flow ...
so this require a proper fix.
Posting a custom event as suggested is a patch, but normally this should not happen at all.
(since i m a mantainer for the project i m going to fix this)
Prasanth, your problem is simple. You have typo. Try to use like this:
canvas.selection = false;
Here is a code which you can try:
canvas.on('mouse:down',function(e){
canvas.selection = true;
});
canvas.on('mouse:down',function(e){
if( e.e.button == 1 ) {
canvas.selection = false;
};
});
Related
I'm working on a project in React where I need to differentiate between right and left clicks, as well as left and right mouse-downs. I am having no problems at all with the mouse-down event, but am having a big problem with the click event.
In my onMouseDown handler, I'm checking event.button to see weather the mouse-down occurred with the left or right side of the mouse (event.button === 0 for left mouse-down, and event.button === 2 for right mouse-down). This is working perfectly as expected.
However, the exact same logic is not working for the click event on my onClick handler; only the left click is working. In fact, when I try to log the entire event object on click, there is no response at all with the right click. It's as if the click event doesn't work for right clicks.
For context, I have turned off the context menu on the element I'm talking about because that was getting in the way, but even when I allow the context menu as normal I am having no luck with the right click event.
Here is some code to show you what I'm talking about:
// Works perfectly
const handleMousedown = (e) => {
if (e.button === 0) {
setLeftMousedown(true);
// console.log(e.button);
}
if (e.button === 2) {
setRightMousedown(true);
// console.log(e.button);
}
};
*******************************
// Does NOT work for the right click, and the console.log at the top only fires at all on left clicks
const handleClick = (e, i, j) => {
console.log(e); // only registers for left click
if (e.button === 0) {
let gridCopy = JSON.parse(JSON.stringify(grid));
gridCopy[i][j].on = !gridCopy[i][j].on;
setGrid(gridCopy);
}
if (e.button === 2) {
console.log('rightclick');
let gridCopy = JSON.parse(JSON.stringify(grid));
gridCopy[i][j].wall = !gridCopy[i][j].wall;
setGrid(gridCopy);
}
};
Any ideas why this is happening OR how I can register right click events separate from left click events?
Click events don't work with right mouse button. You should ever use mouseDown or use onContextMenu: https://stackoverflow.com/a/28656242/4949918
For right click, you need to set the onContextMenu prop
onContextMenu={this.handleClick}
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).
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 need to change the action of righ click and middle click to left click, so that when someone right clicks or middle clicks (mouse wheel click) inside a page, it will always act as a left click.
How is that possible?
require jquery
$(document).live('click', function(e) {
if( e.which != 1 )
{
var target = e.target;
target.click();
e.preventDefault();
}
});
this is my basic test on Fiddle hope it works for you
http://jsfiddle.net/GSXDJ/15/
You can detect what button was clicked using the event.which property, f.ex:
document.onclick = function(e) {
alert(e.which);
};
http://jsfiddle.net/R3LVW/
1 is left, 2 and 3 is middle and right. Now add your own logic to that. If you need to normalize between browsers, I recommend jQuery for events.
In this example : Undo/Redo
Drop the start node on to the canvas.
Mousedown on the port and drag it.
Now while dragging press RIGHT CLICK.
Now the issue is that the port become detach from the start node. It should not be happen.
Please look in to the image below for better understanding.
Please help me to overcome this issue.
Thanks in advance.
I have closely analyse the issue and come to the conclusion as :
Problem is on Mouse Down and Mouse Up.
As I have seen when I have mouse down and drag the port and then press right mouse down.
then what happen is mouse down called in the canvas.js.
Then when right mouse up then mouse up of canvas.js called and make mouseDown = false.
this.html.bind("mouseup touchend", $.proxy(function(event)
{
if (this.mouseDown === false)
return;
event = this._getEvent(event);
this.mouseDown = false;// it makes mouseDown false
this.onMouseUp();
}, this));
So for know quick fix I have ckecked if right mouse up and right mouse down then return as:
In Mouse Down :
this.html.bind("mousedown touchstart", $.proxy(function(event)
{
event.preventDefault();
if(event.which == 3)//added this in the mouse down
return;
event = this._getEvent(event);
this.mouseDownX = event.clientX;
this.mouseDownY = event.clientY;
var pos = this.fromDocumentToCanvasCoordinate(event.clientX, event.clientY);
this.mouseDown = true;
this.onMouseDown(pos.x, pos.y);
}, this));
In Mouse Up :
this.html.bind("mouseup touchend", $.proxy(function(event)
{
//added extra condition for right click
if (this.mouseDown === false || event.which == 3)
return;
event = this._getEvent(event);
this.mouseDown = false;// it makes mouseDown false
this.onMouseUp();
}, this));
After above modification the problem is resolved, I might be wrong. Please correct me, as i have not tested it deeply but ya its working. I need your guidance on that. Sorry for altering the code.
THANKS YOU SO MUCH:)
This is a bug and will be fixed in one of the next releases.