Develop Reference

Understand the flow of touch event in HTML5 , 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.

How to find a Javascript function if it is event handler?

I want use Chrome developer tool to add a break point to js function to debug it.
For example, a function "buttonAlert()" is binded to a button.
But I don't know where the code of such function, and I don't know where the code that bind the function to button.
So, how can I use the tool to find out the location of function and binding code?

It is actually possible to see event listeners in chrome.
Go to the elements panel, select the element in question and click on Event Listeners on the right side.
Sadly most of the time when jQuery is in use, you only see the part of the source of jQuery that bound the event, not the one that called jQuery.

Detect if CKEditor used a keyup event, or prevent its propagation

In short
Is there a way in which, when listening to a native event, I can detect if the event was somehow used by CKEditor before it propagated to my listener, or prevent it from propagating at all?
Use case
I'm listening to the keyup event using jQuery, to detect when escape is pressed. When it is, the user is prompted if they want to discard changes, and the CKEditor instance is destroyed and its element removed from the DOM.
$('body').on('keyup', function(e){
if(e.which==27){
CKEDITOR.instances.myDiv.destroy();
$('#myDiv').remove();
}
});
The problem here is that CKEditor allows the user to interact with certain UI elements using the escape key. For instance to close a dialog window or drop-down list.
So my event should only execute its code if CKEditor did not already use the event to close a UI element of its own.
Attempt
I tried to listen to the dialogShow and dialogHide events to detect if a dialog window is open, and my action should thus be ignored. This didn't work for two reasons:
CKEditor handles the event first, so by the time the event propagates to my listener, no dialog windows are open and my code is executed.
Even if it would work, it wouldn't for drop-down lists as they do not trigger the dialog* events.
Ideas
I don't know enough about the workings of CKEditor to come up with a solution, but I think I'm looking for something along the lines of:
A setting in CKEditor to prevent event propagation: CKEDITOR.instances[0].noEventPropagation = true
An indication in the original event object: if(event.CKEditorWasHere){/*do nothing*/}
A plugin providing functionality that I can use.
Worst case scenario: A setTimeout in the dialogHide event which I'll use to suppress my own events for a short time.
So
Maybe I'm completely overlooking something. This seems to me like a common problem which should have a simple solution.
Thanks for your time.

Prevent scroll event on scrollTop or scrollTo function

I'm doing a little jQuery plugin, and i'm confront a problem.
I read all internet without find a pertinent answer...
I have to say i don't want to prevent scroll at all, it's a little more complicated :
I have a system who scroll on the window with the jQuery function scrollTop(int y), but it's the same thing with the native javascript scrollTo(int y) (or scrollBy, indeed)
When those function are called, they trigger a 'scroll' event. And i don't want those functions to trigger this event, so i want to block it.
jQuery event.preventDefault(); doesn't work, obviously cause it block event action in event handlers function, so i just want this scroll event don't even be trigger.
I will be very thankful for help, cause i haven't any ideas how to do that.

Simulation Click with JavaScript

I have a scheduler control, and some divs which can be dragged into the Scheduler which are two separate controls, now I have a problem, I succeeded to make the drag and drop event, when I drop I created an alert to get the coordinates where the drop was made see img below:
Now what I need to do is simulate a click event so when the user makes a drop an automatic click event is triggered (to trigger the add new event function of the scheduler)... anyone has any idea of how to achieve this?

Now what I need to do is simulate a click event so when the user makes a drop an automatic click event is triggered (to trigger the add new event function of the scheduler)... anyone has any idea of how to achieve this?
Don't try to simulate the click; instead, have both the click event and the drop event call a central, reusable function. While there are legitimate reasons you might want to simulate a click event, normally that's not how you solve this sort of problem.

Define the handler externally. Instead of ... ('click', function(event){}) do var handler = function(event){}; ... ('click', handler) and then you can easily do handler.call(this,event);.

A Pub/Sub system of any sort would handle this in a more loosely coupled way. For jQuery there is a really tiny but good one at https://gist.github.com/661855
If you're using any other framework you're likely to find others to suit you.