I am working on an RTS game where you can select units and right click to make them go somewhere. You can also shift right click to queue up a list of points you would like the units to travel to.
In all browsers except FF this is working perfectly.
In Firefox however the shift right click triggers a context menu (right click without shift does not). I am handling the contextmenu event and calling preventDefault but that doesn't seem to do anything in FF when the shift button is held.
Is there any way to block this behavior in FF?
My game is here: https://mod.it/4plhXo3l and the code in question in in the RTSBoard.js file on line 36.
I managed to get this working in Firefox by setting event.shiftKey to false, then calling preventDefault(), and stopPropagation(), then returning false. I then set the document model's onclick event and ondblclick events to the same function you wound up using for yourself, plus the added setting of the shiftkey to false. I also had to do this for mouseup events, because clicking and dragging was also causing context menus to pop up.
I'm not sure it can be fully 100% disabled, but this looks to be about the closest you can get it.
Answering my own question. It appears that calling preventDefault and stopPropagation in the document.onclick event solves the issue.
See this reddit thread for more discussion: http://www.reddit.com/r/javascript/comments/1agoj8/is_it_possible_to_block_the_shift_right_click/
Related
I have two div elements. When I press mouse button on one of them, then move mouse to another one or just somewhere else and then release the button, mouseup event is not fired. It is actually fired, but only for the first several random times (usually 1…10). Then it stops. Mouse curser turns to a stop sign and only mousedown event is fired.
I tried to add mouseup eventlistener to document.documentElement and document element as it was suggested here but it did not help. Mouse curser is still turning to a stop sign after several successful mouseups and does not fire until page is reloaded.
It still fires perfectly if you release the button on the same element.
How to make mouseup event to be fired always when mouse button is released disregarding where you have started and finished? It is crucial for my program.
I checked it in Chrome. In Firefox it works almost the same, but the number of possible mouseup events on another then started element is little bit more (up to 20). Then the same stop sign appears.
Here is a screenshot
Here is a JSFiddle
I have found Solution!!!
This topic was very much helpful.
So why does the browser shows stop sign when you move the mouse with pressed button? Because it thinks you are trying to drag this element! But why it does not protest when you do it for the first (or several first) time? Because pressing mouse first time you....just select this element. Then you try to drag it and only this draws a protest of the browser and it shows stop sign. During showing stop sign browser cannot fire any mouse events.
So how to prevent browser from thinking you are going to select and drag this element. It’s very simple. Just add -webkit-user-select: none; in the CSS for this element (it’s for Chrome, for Firefox the prefix will be -moz- and so on).
Now all mouse events will work disregarding when, why and in which order mouse buttons were pressed!
Here is a JSFiddle
There is an area of a site that i'm working on that has right click somehow disabled. I've been trying to find the code that's disabling it with no luck.
these are the things i've searched for
oncontextmenu
onselectstart
user-select
but none of these are present in the code.
Any ideas on how i can pin point whats stopping the right click?
You can do it using jquery by this: $._data( $('.className')[0], 'events' );
this should return all events bound to your element and using this you will be able to figure out which event is disabling your right click.
Or you can use this firebug extention http://firequery.binaryage.com/ which list all events attached to elements as well.
Have you tried putting a breakpoint on all the mouse events and see if you get any breakpoints?
If you're in Chrome you can do this by hitting F12 on the page and then on the right-side panel you'll see an Event Listener Breakpoints panel that you can expand. Find Mouse and tick it and it should trap all mouse events. that may help you track what's going on.
You can see the issue here:
This doesn't seam to happen in chrome, ie , or safari.
However, in Firefox...
http://jsfiddle.net/jocose/aHj69/
If you double click it changes color.
The problem is if you uncomment the "toFront" function under click, dblclick no longer gets called.
Currently I have multiple draggable objects and want to move each element to the front when you click on them. This works fine, but it disables double click.
UPDATE: I just tried to manually specify a double click by saving and comparing the timestamp between clicks. This does work in firefox but it doesn't work in IE.
IE doesn't allow you to click fast enough to register a double click. I think it might be calling double click and not click when you click fast. Anways the end result is that IE only registers 1 click when I click twice fast.
So is my only option to write browser specific code?
The webkit browser on iphone has a 300ms delay between when a user does a touch and when the javascript gets a click event. This happens because the browser needs to check if a user has done a double tap. My app doesn't allow zooming so a double tap is useless for me. A number of people have proposed solutions to this problem and they usually involve handling the 'click' on the touch end event and then ignoring the click generated by the browser. However, it doesn't seem to be possible to suppress a click that gets sent to an input element. This can cause a problem if you have a dialog that opens above a form then a user hits the close button and their click gets routed to an input element when the form disappears.
Example with jqtouch (for iphone only)
You have to capture your event on touchstart if you want to get the fastest possible responsiveness. Otherwise you'll be doomed with this input lag.
You have to remember though that capturing event on touchstart and responding to it makes it impossible to cancel action by dragging your finger out of responsive area.
I have personally used this in my PhoneGap html/js based iphone application and it worked perfect. The only solution to give this almost-native feel.
Now regarding your problem - have you tried to stop the propagation of the event? It should solve your problem.
$('.button').bind('touchstart', function(e){
e.stopPropagation();
// do something...
});
hope it helps,
Tom
My colleagues and I developed an open source library called FastClick for getting rid of the click delay in Mobile Safari. It converts touches to clicks and handles those special cases for input and select elements cleanly.
It's as easy as instantiating it on the body like so: new FastClick(document.body), then listening for click events as usual.
I made Matt's FastClick a jquery plugin:
stackoverflow link
Just had a comment about the onClick handler being called without the necessary scope being passed. I updated the code to make it work.
There also seems to be a problem when input elements lie under the ghost event's position: the focus event gets triggered without being busted.
I see two problems in the question. One is handling the delay in click and the other is handling input focus.
Yes, both of these have to be handled properly in mobile web.
The delay in click has deeper reasons. The reason for this 300ms delay is explained very well in this article.
Responsiveness of the click event.
Thankfully this problem is well known and solved by many libraries.
JQTouch, JQuery Mobile,
JQuery.tappable,
Mootools-mobile,
and tappable
Most of these libraries create a new event called tap. you can use the tap event similar to the click event. This jquery-mobile event handling might help.
$("#tappableElement").tap(function(){
// provide your implementation here. this is executed immediately without the 300ms delay.
});
Now, the second problem is with the handling of input focus.
There is a noticeable delay here also.
This can be solved by forcing focus on the element immediately for one of the touchstart or touchend events. This JQuery event handling might help.
$('#focusElement').bind('touchstart', function(e){
$(this).focus();
});
$('#focusElement').focus(function(e){
// do your work here.
});
You can do e.stopPropagation in 'touchstart' event handling to avoid propagation. But I would strongly advise against return false; or e.preventDefault as that would stop default functionality like copy/paste, selecting text etc.
I am working on a web app in which I want to have a different action happen to an element whether I left or right click on it.
So I first added a function to handle the click event with jQuery, and then added a second function to handle the oncontextmenu attribute of my element.
This is working well in Chrome & IE but causes a problem in Firefox: When I right click on an element, my function that handles the left click is surprisingly called, and then my function that handles the right click is called.
How can I make Firefox not call the left-click function when I right click?
Yeah, browsers traditionally send right-clicks to the onclick handler, with the event.which property set to 3 instead of 1. IE used oncontextmenu instead, then Firefox picked up oncontextmenu in addition to the usual onclick. To cater for the browsers you will have to catch both events — or find a plugin that will do it for you.
Note that even with this sorted out, you are still not guaranteed to get right click events or be able to disable the standard context menu. Because many web pages abused the ability, it is disablable in many browsers, and sometimes disabled by default (eg. in Opera). If your app provides right-click actions, always ensure there is an alternative way to bring them up.
My problem came from the fact that on one side I was using the insanely great jQuery live function for click and the oncontextmenu attribute on the other. (Using onclick and oncontextmenu was not a problem).
I've just modified my $.live("click"...) function by catching the event and not firing the rest when e.which is 3.
Problem solved!