I'm trying to detect whether a pointing device is being used on the page. $(document).on('mouseover') is being used to trigger a global variable, with the idea that any click before this happens signifies that a pointing device is not connected. Unfortunately, mousedown or pointerdown are triggering the mouseover BEFORE I have a chance to set a false value. Is there a way to catch the click before the mouseover fires? Is there something I can test for when the mouseover fires that will tell if the mousedown is also fired?
I don't think your approach is accurate, you won't be able to catch mouseover before mousedown, think about it... it's not natural that it happen that way. What are you actually trying to change in your web?
Related
I'm using an module-project from Github on my Angular project, that lets me resize my DOM elements, which are drawn on top of a div, that works as a draw-board.
To shape my first elements, who are simple rectangles, by the way, i am using a mouseDown - mouseMove - mouseUp combination Event Listener, and then when i decide to resize one i hover over the edges and resize it.
Problem is that on the resizing event, which is a combination of resizestart - resizing - resizeend, although i know that the module is using and mouseDown-Move-Up Event listener and emits the events mentioned before, i cannot get the MouseEvent created, and instead i get the ResizeEvent, which doesn't have a stopPropagation() method, so calling it as it is gives an error(that it's not a function).
I need to stop Propagation, because when i resize my Elements on my draw-board the click event gets bubbled to the immediate parent element, and as a consequence i resize an existing element and create a new rectangle at the same time.
On top of that, the ResizeEvent doesn't even include an "event.target"-like property which makes matters worse...
So, i was wondering how can i work around this one??
I was thinking using #HostListeners, but wouldn't the code executed in that directive get mixed up with the Resizable directive(the module is declared as a directive)??
And messing around with the Resizable-module files doesn't sound like a good idea, since if anyone wants to use my module will have to download my tampered files of the resizable project...
Answer to your question is :
event.preventDefault() will stop the default functionality.
I think this may solve your issue.
The event.preventDefault() method stops the default action of an element from happening.
For example:
Prevent a submit button from submitting a form
Prevent a link from following the URL
$(document).ready(function(){
$("a").click(function(event){
event.preventDefault();
});
});
When an element gets an onmouseover event registered, it doesn't trigger if the mouse is over the element during the register, until the mouse moves. I know that after you register it, you can check if the mouse is over and trigger the event with some extra code.
Is there a better way to do this?
Edit #1: response to first comment
I mean that Ideally there would be some sort of way to do this without manually checking if the mouse is over the element and manually triggering a fake onmouseover event. Is there a better way to accomplish this functionality in a standard way? Maybe a library that already thought of this?
Is there any way in Javascript to tell what the most recently-fired event was? Reason I'm asking is I'm working on a site that isn't behaving properly on one of those new Ultrabooks that's running Windows 8 and is a laptop with a touch screen. If you use the standard mouse functionality (with a touchpad or an actual mouse), things work fine, but if you use the touch screen, things don't.
This only happens with IE; Chrome has its own issues (which I have fixed in the code), and Firefox hasn't given us any problems.
Basically, the functionality we have includes a "hoverIntent" block, and if you use the touch screen on IE, it registers both the "over" and "out" functions, which is a problem.
However, if there was a way for me to tell whether the last thing that happened was that the user TOUCHED THE SCREEN or CLICKED WITH A MOUSE, I'd have a solution in place. But I couldn't tell if there's a way to do that.
The only thing I could find was tacking on ".data('events')" on an element, but what returns is "click" regardless of whether it was an actual mouse click or a tap on the screen.
Is there a way to do this?
The browser does not have a standard way of recording events that happened previously. If you want to know what events happened prior to the current event, then you will have to install an event handler for those events and record them yourself so you can then look back at them at some future time.
For events that propagate, you could install some event handlers on the document object and record both event and target for the last N events.
If you're just trying to figure out what event the current event is, then you can examine the type property of the event object that is passed into the event handler as in e.type.
You can add an event to your function arguments and then use event.type to check which event is triggered.
ex:
var x = function(e) {
alert(e.type);
}
So I found out that IE has a completely different set of touch events from what EVERY OTHER BROWSER IN THE UNIVERSE has. ughhh. Instead of "touchstart," you use "MSPointerDown," etc. My solution was basically to write new event handlers for MSIE's touch device events.
There is a lot of material/posts on ghost clicks and I'm trying to understand it better. So the way I understand it, the reason for ghost clicks is the click event being dispatched ~300ms after the touch event. jQuery Mobile suggests to not use their vclick event whenever there is any chance of changing the content underneath the finger position.
My first question would be: Does that mean ghost clicks will only fire if the element targeted by click is different from the one originally touched? So, say, I write a database entry when a button is touched – nothing else. Is there a chance of ghost clicking or not?
If this is the case, wouldn't that mean that I can prevent ghost clicks altogether if I simply use only tap events and no click events whatsoever?
My last question would be if I can simply tell the browser to not use the 300ms delay when using PhoneGap (which would instantly solve the problem), but I'd just guess that I can't do that as it's probably hard-coded into the browser.
The click event is delayed by 300 ms to detect things like double tap or fat finger mistakes.
Yes, wherever possible you should use the touch events instead.
Yes, there are many ways to enable fast clicks by doing a bit of JS. For instance:
https://developers.google.com/mobile/articles/fast_buttons
https://forum.jquery.com/topic/how-to-remove-the-300ms-delay-when-clicking-on-a-link-in-jquery-mobile
http://labs.ft.com/2011/08/fastclick-native-like-tapping-for-touch-apps/
You don't have to live with the 300ms delay.
If everything on your page that can be clicked has the appropriate vclick jQuery event handlers installed, then one easy way of stopping ghost clicks is create a touchend event handler on the body and call preventDefault from it:
$(document.body).on('touchend', null, function(e) {
e.preventDefault();
});
Note that this will disable regular clicks from touches, so any conventional links or form inputs you have will stop working unless you add vclick handlers to them.
I am trying to differentiate a click from a swipe in Javascript using touch events. I would like to know, is there a property in the touch event object that can be inspected to determine the difference on a 'touchend' event, or do you have to listen for both a touchstart or touchend AND a touchmove event? I am trying to minimise the number of event listeners I have to add to the DOM and am wondering if it is possible to do this by observing a single event? Specifically I am looking at webkit on iOS.
Don't bind to the click event at all. It responds much slower than the collection of touch events.
To check for a swipe, you need to listen for the touchstart and touchend events. Don't worry about touchmove unless you're planning on doing something when that event fires.
On the touchstart event, you will need to record the x/y position of the event. On the touchend event, do the same again. What you'll also need is some kind of threshold value, so that when you calculate the difference between x1-x2 and y1-y2 you can determine if it was a swipe or not.
Apple gives a meta-algorithm that involves touchmove here http://developer.apple.com/library/ios/#DOCUMENTATION/AppleApplications/Reference/SafariWebContent/HandlingEvents/HandlingEvents.html. Search on that page for "identify a swipe" and you'll find it.
I personally have never needed to use touchmove and successfully have used the technique I described above. However, either is a valid approach so you should investigate what works best for you.