Understand the flow of touch event in HTML5 , JavaScript - javascript

In my project when we are touching one button another button is getting selected. I can not share the code here. But I am trying to understand the flow of the touch event.
My understanding is :
We click a button
Browser detects the event and let the HTML5 know.
HTML5 raises that as an event (like click)
HTML5 passes that to the JavaScript's event handlers.
So may be the page.x and page.y co-ordinates detected by the browser are wrong.
Kindly let me know if my understanding is wrong of the flow of touch event.

Check whether are you using same class for the buttons.
This may also due to event may get bubbled up this can be prevented by using event.stopPropagation().
Check this link https://api.jquery.com/event.stoppropagation/.
This is what i can suggest, if not please post a detail explanation.

Related

Is there a programm accessible relation between click-, mousedown- and pointerdown-events in Javascript?

Using pointer-events rather then mouse, touch or click events more often, I run into a situation where I would like to tell the browser, "hey, I am using pointer-events on this HTMLElement, forget about mouse, click or touch events (in particular any device defaults)".
In particular stopPropagation() or preventDefault() called from a pointer-event handler have no influence on the other types of events that may be generated from the same user action.
Is there anything similar to, say, stopPropagation() to tell the browser not to derive further events from a user interaction that was handled already in my pointer-down event?
There are a few specific questions in this direction like this one, but I couldn't find a definitive answer like "there is no relation" (what I am afraid will be the answer finally :-/ ).

How to ignore right click on Easel JS

I am working on Easel JS and came across one issue.
If I am adding Events to one easelJs element then how can I ignore the right-click and only listen to left-click?
Click should work on a primary key but it is also working for other keys also.
I have come across one scenario where pressUp of left-clicking is getting missed and that is creating an issue.
steps are as follows:
left mouseDown on the object.
right mouseDown on the same object.
right pressUp on the object.
If we follow this order, left pressUp is getting missed it is not getting fired nor it is present after that point. It's like it totally vanishes as if it never existed.
Can anyone please help me with this? Thank you in advance!!
I am kind confused with your question, but I think a easy way to ignore the right click event is to use event.preventDefault for contextmenu.
The preventDefault() method of the Event interface tells the user
agent that if the event does not get explicitly handled, its default
action should not be taken as it normally would be.
For example (you may not able to show the right click menu in the example):
document.addEventListener('contextmenu', function() {
event.preventDefault();
return false;
})

Prevent automatic triggering of a click event on client side using the console window

Clicks on any HTML element can be triggered merely by using the jQuery function .trigger("click") on any selected element. Automating this click triggering can cause a problem when time taken to perform the click matters, for ex: Time based game.
How do I stop the automatic triggering of the click event that can be done using the developers tools (the console window)?
Alternatively,
How do I differentiate between a click made by a user and a click triggered from the console window?
Thanks for the help.
If the person simulating the click does it carefully enough, you can't.
If they just use $(/*...*/).click(), it's easy: A real click event will have properties for the mouse position (pageX and pageY), one created using $(/*...*/).click() won't.
But it's fairly easy to create an event that has those properties, so that would only weed out incompetent cheaters rather than all of them.

How do I determine what element received an event?

I just finished a pretty intense debugging session where my cucumber test code would work using webkit but wouldn't work using selenium. The problem was solved by being very specific about the exact DOM element that was clicked. I needed to specify clicking a deeply nested <span> element. This brought up a question for which I'm not sure how to answer:
How do I know what element, initially, received an event?
I've read a bit about event bubbling, so even if my element's event handler fires, it doesn't mean that it was the initial element to receive the event. I don't understand why Chrome was able to accept a click event that was propagated down to the correct element that fired off my handler, but Firefox didn't propagate the event down.
This question on debugging events doesn't quite capture my question, because in this case I didn't know what element to examine. I basically guessed correctly. I'd love a more methodical process to use to debug. Bonus points for helping me understand better the JS event bubbling/propagation model.
It's target property of the event object.
domElement.addEventListener('click', function(e){
console.log(e.target);
});

How to tell what Javascript event just fired

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.

Categories

Resources