In the code below, the right-click is not getting trapped. left-click works fine. This code was given in the dojo documentation. Can someone tell me why isRight is not working? Essentially, when I right-click the element, I just get the browser's right-click menu, no console message is generated.
https://dojotoolkit.org/reference-guide/1.10/dojo/mouse.html
on(myNode,'click',function(e) {
if (mouse.isLeft(e)){
console.log("left click", e);
} else if (mouse.isRight(e)){
console.log("right click",e);
}
});
The browser right click context menu consumes the click event. It will work if you use 'mousedown' instead of 'click'. There are also many questions about right click detection in javascript that you can look into for alternate methods. For example: Failing to identify right click event in Mozilla Firefox.
The dojo/mouse module is mostly a utility wrapper over the usual event handling, so the information in these questions still applies.
You cannot detect mouse.isRight when using event click. Instead you could use mousedown as in the following example:
https://jsfiddle.net/xgekrp5e/
require(["dojo/mouse", "dojo/on"], function(mouse, on) {
on(document, "mousedown", function(evt) {
if (mouse.isLeft(event)) {
// handle mouse left click
alert('MOUSE LEFT');
} else if (mouse.isRight(event)) {
// handle mouse right click
alert('MOUSE RIGHT');
}
});
});
Related
I've got a sub-nav that works using jquery - A user clicks on the top level list item, for instance 'services' which triggers the dropdown. The dropdown toggles via clicking the 'service' link. I've made it so a user can click anywhere on the screen to toggle the dropdown to a closed state. But as the site is responsive i want the user to be able to click (touch) anywhere on the screen to close the dropdown but my problem is that it's not working on the touch devices.
My code ive setup for the document click is:
$(document).click(function(event) {
if ( $(".children").is(":visible")) {
$("ul.children").slideUp('slow');
}
});
I'm assuming document.click might not work on touch devices, and if not, what work-around is there to achieve the same effect?
Thanks
Update! In modern browsers, the click event will be fired for a tap, so you don't need to add extra touchstart or touchend events as click should suffice.
This previous answer worked for a time with browsers that thought a tap was special. It originally included a "touch" event that actually was never standardised.
Unless you have a problem with:
$(document).on('click', function () { ... });
There is no need to change anything!
Previous information, updated to remove touch...
To trigger the function with click or touch, you could change this:
$(document).click( function () {
To this:
$(document).on('click touchstart', function () {
The touchstart event fires as soon as an element is touched, so it may be more appropriate to use touchend depending on your circumstances.
touchstart or touchend are not good, because if you scroll the page, the device do stuff.
So, if I want close a window with tap or click outside the element, and scroll the window, I've done:
$(document).on('touchstart', function() {
documentClick = true;
});
$(document).on('touchmove', function() {
documentClick = false;
});
$(document).on('click touchend', function(event) {
if (event.type == "click") documentClick = true;
if (documentClick){
doStuff();
}
});
can you use jqTouch or jquery mobile ? there it's much easier to handle touch events.
If not then you need to simulate click on touch device, follow this articles:
iphone-touch-events-in-javascript
A touch demo
More in this thread
To apply it everywhere, you could do something like
$('body').on('click', function() {
if($('.children').is(':visible')) {
$('ul.children').slideUp('slow');
}
});
As stated above, using 'click touchstart' will get the desired result. If you console.log(e) your clicks though, you may find that when jquery recognizes touch as a click - you will get 2 actions from click and touchstart. The solution bellow worked for me.
//if its a mobile device use 'touchstart'
if( /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent) ) {
deviceEventType = 'touchstart'
} else {
//If its not a mobile device use 'click'
deviceEventType = 'click'
}
$(document).on(specialEventType, function(e){
//code here
});
the approved answer does not include the essential return false to prevent touchstart from calling click if click is implemented which will result in running the handler twoce.
do:
$(btn).on('click touchstart', e => {
your code ...
return false;
});
I've got a sub-nav that works using jquery - A user clicks on the top level list item, for instance 'services' which triggers the dropdown. The dropdown toggles via clicking the 'service' link. I've made it so a user can click anywhere on the screen to toggle the dropdown to a closed state. But as the site is responsive i want the user to be able to click (touch) anywhere on the screen to close the dropdown but my problem is that it's not working on the touch devices.
My code ive setup for the document click is:
$(document).click(function(event) {
if ( $(".children").is(":visible")) {
$("ul.children").slideUp('slow');
}
});
I'm assuming document.click might not work on touch devices, and if not, what work-around is there to achieve the same effect?
Thanks
Update! In modern browsers, the click event will be fired for a tap, so you don't need to add extra touchstart or touchend events as click should suffice.
This previous answer worked for a time with browsers that thought a tap was special. It originally included a "touch" event that actually was never standardised.
Unless you have a problem with:
$(document).on('click', function () { ... });
There is no need to change anything!
Previous information, updated to remove touch...
To trigger the function with click or touch, you could change this:
$(document).click( function () {
To this:
$(document).on('click touchstart', function () {
The touchstart event fires as soon as an element is touched, so it may be more appropriate to use touchend depending on your circumstances.
touchstart or touchend are not good, because if you scroll the page, the device do stuff.
So, if I want close a window with tap or click outside the element, and scroll the window, I've done:
$(document).on('touchstart', function() {
documentClick = true;
});
$(document).on('touchmove', function() {
documentClick = false;
});
$(document).on('click touchend', function(event) {
if (event.type == "click") documentClick = true;
if (documentClick){
doStuff();
}
});
can you use jqTouch or jquery mobile ? there it's much easier to handle touch events.
If not then you need to simulate click on touch device, follow this articles:
iphone-touch-events-in-javascript
A touch demo
More in this thread
To apply it everywhere, you could do something like
$('body').on('click', function() {
if($('.children').is(':visible')) {
$('ul.children').slideUp('slow');
}
});
As stated above, using 'click touchstart' will get the desired result. If you console.log(e) your clicks though, you may find that when jquery recognizes touch as a click - you will get 2 actions from click and touchstart. The solution bellow worked for me.
//if its a mobile device use 'touchstart'
if( /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent) ) {
deviceEventType = 'touchstart'
} else {
//If its not a mobile device use 'click'
deviceEventType = 'click'
}
$(document).on(specialEventType, function(e){
//code here
});
the approved answer does not include the essential return false to prevent touchstart from calling click if click is implemented which will result in running the handler twoce.
do:
$(btn).on('click touchstart', e => {
your code ...
return false;
});
In Chrome the right-click dialog seems to swallow all mouse events. This means that you get mouse-down events without corresponding mouse-up events.
This includes every right-click, and any left-click where the right button is pressed before the left button is released (in which case you get two mouse-downs but no mouse-ups).
You can see the problem in action here (you may wish to mute your speakers) if you're curious.
I was just wondering if anyone knew of any workarounds for this? Using window.onmousedown instead of document.onmousedown doesn't fix the problem unfortunately.
You'll want to add a handler for the contextmenu event that cancels the opening of that menu.
See MDN for some details.
window.oncontextmenu = function(event) {
event.preventDefault();
event.stopPropagation();
return false;
};
In trying to detect a right mouse click with jquery, I noticed that the click event handler doesn't seem to be fired off with a right mouse click, while the mousedown or mouseup event handler's do.
For example, after a right click on the test div, the following alerts 'testing!':
$('#test').mousedown(function(e) {
alert('testing');
});
However, the following does not:
$('#test').click(function(e) {
alert('testing!');
});
Does anyone know why?
When you mousedown, the even fired has event.which
Taken from here: How to distinguish between left and right mouse click with jQuery
$('#element').mousedown(function(event) {
switch (event.which) {
case 1:
alert('Left mouse button pressed');
break;
case 2:
alert('Middle mouse button pressed');
break;
case 3:
alert('Right mouse button pressed');
break;
default:
alert('You have a strange mouse');
}
});
So instead of using .click(), use mousedown and check for the cases.
As this article puts it:
There are no click events for right button clicks in any browser.
So you're left with mousedown and mouseup in most browsers.
Not sure which browser(s) you've tested with, but according to MSDN the onclick fires "when the user clicks the left mouse button". I.e., by definition it doesn't occur for right (or middle) clicks. Given that's on MSDN you can expect IE to behave that way regardless of what the other browsers do.
(Onclick also fires for certain non-mouse things, like changing certain form elements with the keyboard, etc.)
I know jQuery tries to normalise behaviour between browsers, but if the browser doesn't fire the event at all...
There is at least one jQuery plugin that I know of that implements right-click: http://abeautifulsite.net/blog/2008/05/jquery-right-click-plugin/ (I haven't used it, but it looks good except that it notes that Opera doesn't support it).
I have also tried the following code to catch right mouse click for certain class of elements
$(".brick").mousedown(function (event) {
if (event.which === 3) {
currentRightClickedTileID = $(this).attr("id");
}
});
This code doesn't always catch the right click.
I have a jquery script that attaches a click event to every link, running an action when the link is clicked. This has been working great, but I just got some betatester feedback that's foiling me.
The user was right-clicking on the link and opening it in a new tab. When she did this, jquery didn't trap the click. BAD USER. I reproduced this with cmd-click as well.
Is there a way to trap these gestures, or this an inherent limitation?
So you want to capture every click? Event the right or middle one? Shouldn't the mousedown event do just that?
Of course, she could right click a link just to "Copy Link Location"...
See if you can somehow make use of jQuery rightclick plugin:
http://abeautifulsite.net/notebook/68
Usage:
$(document).ready( function() {
// Capture right click
$("#selector").rightClick( function(e) {
// Do something
});
// Capture right mouse down
$("#selector").rightMouseDown( function(e) {
// Do something
});
// Capture right mouseup
$("#selector").rightMouseUp( function(e) {
// Do something
});
// Disable context menu on an element
$("#selector").noContext();
});
As for the cmd-clickie bit, I'm really not sure. In case it's helpful, here's the jQuery hotkeys plugin:
http://www.webappers.com/2008/07/31/bind-a-hot-key-combination-with-jquery-hotkeys/
I've seen jquery.rightclick.js code in firebug. There are modifiers with the mousedown and mouseup event like:
altKey
ctrlKey
so you can use these two modifiers:
if(evt.altKey || evt.ctrKey)
in jquery.rightclick.js