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.
Related
I want to excute some function after the user double clicks their mouse wheel. But I can't trigger the event listener when I double click the mouse wheel and code like this doesn't work as I expected:
https://developer.mozilla.org/en-US/docs/Web/API/Element/dblclick_event
const card = document.querySelector('aside');
card.addEventListener('dblclick', function (e) {
card.classList.toggle('large');
});
This event only triggered when the primary bnutton is clicked.
I am not sure this event should be triggered only when the left button is clicked, or when any button is clicked. Can anyone explain this to me?
Here, you can use MouseEvent.button
MouesEvent has the following numerical representations:
0: Main button pressed, usually the left button or the un-initialized state
1: Auxiliary button pressed, usually the wheel button or the middle button (if present)
2: Secondary button pressed, usually the right button
3: Fourth button, typically the Browser Back button
4: Fifth button, typically the Browser Forward button
document.getElementById('aside').addEventListener('dblclick', function(e) {
console.log(e.button);
e.preventDefault();
});
Another example if you use jQuery. jQuery has the event.which attribute, which like the MouseEvent, assigns the following numerical representations:
event.which also normalizes button presses (mousedown and mouseupevents),
reporting 1 for left button, 2 for middle, and 3 for right.
Use event.which instead of event.button.
$(".aside").live('dblclick', function(e) {
if( e.which == 2 ) {
alert("middle button");
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
I have a simple link Example:
Some text
How to emulate a click on the link. Change the press of the left button to press the wheel? The options with target are not suitable. Interested in the change is the change of the button for the click.
There is an example code. But it only shows what a click was without changing it.
https://jsfiddle.net/dscshmg4/23/
document.getElementById('mouse-click').onmousedown = function(e) {
if (e.which == 1) {this.innerHTML = "left click"}
if (e.which == 2) {this.innerHTML = "wheel click"}
if (e.which == 3) {this.innerHTML = "right click"}
}
i think you want change your event , for example if any body press key you trigger right click in mouse
if it is correct , you can use trigger method in jQuery
http://api.jquery.com/trigger/
for example
you set key press listener
element.addEventListenr('keyPress' , function () {
ele.trigger('click');
});
but if you want other thing explain more
I am using the onclick event of a hashed link to open a <div> as a pop up. But the middle click does not trigger the onclick event but only takes the href attribute value of the link and loads the URL in a new page. How can I use middle click to open the <div> as a popup?
EDIT
This answer has been deprecated and doesn't work on Chrome. You will most probably end up using the auxclick event, but please refer to other answers below.
/EDIT
beggs' answer is correct, but it sounds like you want to prevent the default action of the middle click. In which case, include the following
$("#foo").on('click', function(e) {
if (e.which == 2) {
e.preventDefault();
alert("middle button");
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<a id="foo" href="http://example.com">middle click me</a>
preventDefault() will stop the default action of the event.
For the middle-click / mouse-wheel button to be detected, you have to use the event auxclick. E.g:
Then in your script file
function func(e) {
if (e.button == 1) {
alert("middle button clicked")
}
}
If you want to do it from JavaScript (without using the HTML attribute onauxclick), then you addEventListener to the element:
let myLink = document.getElementById('myLink')
myLink.addEventListener('auxclick', function(e) {
if (e.button == 1) {
alert("middle button clicked")
}
})
<a id="myLink" href="http://example.com">middle click me</a>
Checkout the mdn page about the auxclick event here.
You can use
event.button
to identify which mouse button was clicked.
Returns an integer value indicating the button that changed state.
0 for standard 'click', usually left button
1 for middle button, usually wheel-click
2 for right button, usually right-click
Note that this convention is not followed in Internet Explorer: see
QuirksMode for details.
The order of buttons may be different depending on how the pointing device has been configured.
Also read
Which mouse button has been clicked?
There are two properties for finding
out which mouse button has been
clicked: which and button. Please note
that these properties don’t always
work on a click event. To safely
detect a mouse button you have to use
the mousedown or mouseup events.
document.getElementById('foo').addEventListener('click', function(e) {
console.log(e.button);
e.preventDefault();
});
<a id="foo" href="http://example.com">middle click me</a>
This question is a bit old, but i found a solution:
$(window).on('mousedown', function(e) {
if( e.which == 2 ) {
e.preventDefault();
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
middle click me
Chrome not fire "click" event for the mouse wheel
Work in FF and Chrome
I usually hate when people offer alternatives instead of solutions, but since solutions have already been provided I'm going to break my own rule.
Websites where the middle-click feature is overridden tend to really, really bug me. I'm usually middle-clicking because I want to open the new content in a new tab while having an unobstructed view of the current content. Any time you can leave the middle-click functionality alone and make the relevant content available through the HREF attribute of your clicked element, I strongly believe that's what you should do.
jQuery provides a .which attribute on the event that gives the click button id from left to right as 1, 2, 3. In this case you want 2.
Usage:
$("#foo").live('click', function(e) {
if( e.which == 2 ) {
alert("middle button");
}
});
Adamantium's answer will also work but you need to watch out for IE as he notes:
$("#foo").live('click', function(e) {
if((!$.browser.msie && e.button == 1) || ($.browser.msie && e.button == 2)) {
alert("middle button");
}
});
Also remember the .button attribute is 0-indexed not 1-indexed like .which.
The proper method is to use .on, as .live has been deprecated and then removed from jQuery:
$("#foo").on('click', function(e) {
if( e.which == 2 ) {
e.preventDefault();
alert("middle button");
}
});
Or if you want the "live" like feel and #foo is not on your page on document start:
$(document).on('click', '#foo', function(e) {
if( e.which == 2 ) {
e.preventDefault();
alert("middle button");
}
});
original answer
I know I'm late for the party, but for those still having problems with handling the middle click, check if you delegate the event. In case of delegation, the click event does not fire. Compare:
This works for middle clicks:
$('a').on('click', function(){
console.log('middle click');
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
middle click me
This doesn't work for middle clicks:
$('div').on('click', 'a', function(){
alert('middle click');
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div>
middle click here
</div>
If you still need to track the middle click using event delegation, the only way around as stated in the corresponding jQuery ticket, is to use mousedown or mouseup instead. Like so:
This works for delegated middle clicks:
$('div').on('mouseup', 'a', function(){
console.log('middle click');
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div>
middle click me
</div>
See it online here.
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;
};
});
I am using the onclick event of a hashed link to open a <div> as a pop up. But the middle click does not trigger the onclick event but only takes the href attribute value of the link and loads the URL in a new page. How can I use middle click to open the <div> as a popup?
EDIT
This answer has been deprecated and doesn't work on Chrome. You will most probably end up using the auxclick event, but please refer to other answers below.
/EDIT
beggs' answer is correct, but it sounds like you want to prevent the default action of the middle click. In which case, include the following
$("#foo").on('click', function(e) {
if (e.which == 2) {
e.preventDefault();
alert("middle button");
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<a id="foo" href="http://example.com">middle click me</a>
preventDefault() will stop the default action of the event.
For the middle-click / mouse-wheel button to be detected, you have to use the event auxclick. E.g:
Then in your script file
function func(e) {
if (e.button == 1) {
alert("middle button clicked")
}
}
If you want to do it from JavaScript (without using the HTML attribute onauxclick), then you addEventListener to the element:
let myLink = document.getElementById('myLink')
myLink.addEventListener('auxclick', function(e) {
if (e.button == 1) {
alert("middle button clicked")
}
})
<a id="myLink" href="http://example.com">middle click me</a>
Checkout the mdn page about the auxclick event here.
You can use
event.button
to identify which mouse button was clicked.
Returns an integer value indicating the button that changed state.
0 for standard 'click', usually left button
1 for middle button, usually wheel-click
2 for right button, usually right-click
Note that this convention is not followed in Internet Explorer: see
QuirksMode for details.
The order of buttons may be different depending on how the pointing device has been configured.
Also read
Which mouse button has been clicked?
There are two properties for finding
out which mouse button has been
clicked: which and button. Please note
that these properties don’t always
work on a click event. To safely
detect a mouse button you have to use
the mousedown or mouseup events.
document.getElementById('foo').addEventListener('click', function(e) {
console.log(e.button);
e.preventDefault();
});
<a id="foo" href="http://example.com">middle click me</a>
This question is a bit old, but i found a solution:
$(window).on('mousedown', function(e) {
if( e.which == 2 ) {
e.preventDefault();
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
middle click me
Chrome not fire "click" event for the mouse wheel
Work in FF and Chrome
I usually hate when people offer alternatives instead of solutions, but since solutions have already been provided I'm going to break my own rule.
Websites where the middle-click feature is overridden tend to really, really bug me. I'm usually middle-clicking because I want to open the new content in a new tab while having an unobstructed view of the current content. Any time you can leave the middle-click functionality alone and make the relevant content available through the HREF attribute of your clicked element, I strongly believe that's what you should do.
jQuery provides a .which attribute on the event that gives the click button id from left to right as 1, 2, 3. In this case you want 2.
Usage:
$("#foo").live('click', function(e) {
if( e.which == 2 ) {
alert("middle button");
}
});
Adamantium's answer will also work but you need to watch out for IE as he notes:
$("#foo").live('click', function(e) {
if((!$.browser.msie && e.button == 1) || ($.browser.msie && e.button == 2)) {
alert("middle button");
}
});
Also remember the .button attribute is 0-indexed not 1-indexed like .which.
The proper method is to use .on, as .live has been deprecated and then removed from jQuery:
$("#foo").on('click', function(e) {
if( e.which == 2 ) {
e.preventDefault();
alert("middle button");
}
});
Or if you want the "live" like feel and #foo is not on your page on document start:
$(document).on('click', '#foo', function(e) {
if( e.which == 2 ) {
e.preventDefault();
alert("middle button");
}
});
original answer
I know I'm late for the party, but for those still having problems with handling the middle click, check if you delegate the event. In case of delegation, the click event does not fire. Compare:
This works for middle clicks:
$('a').on('click', function(){
console.log('middle click');
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
middle click me
This doesn't work for middle clicks:
$('div').on('click', 'a', function(){
alert('middle click');
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div>
middle click here
</div>
If you still need to track the middle click using event delegation, the only way around as stated in the corresponding jQuery ticket, is to use mousedown or mouseup instead. Like so:
This works for delegated middle clicks:
$('div').on('mouseup', 'a', function(){
console.log('middle click');
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div>
middle click me
</div>
See it online here.