Simulation Click with JavaScript - 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.

Related

What is the meaning of javascript dispaching events?

Dispatching an event means firing it. the following code will fire the click event of the button 2 times.
let event = new Event("click");
elem.dispatchEvent(event);
elem.dispatchEvent(event);
<button id="elem" onclick="alert('Click!');">Autoclick</button>
Javascript has classes that are listening to the user events (click, hover a button, press a key). That classes are the event dispatchers. What does "dispatch a event" means?
The event dispatchers manage the event in order to "understand" which action has made the user and react with the behaviour that the developer coded.
Javascript has some event dispatcher classes defined by default, but some libraries like JQuery let you create custom events.
To understand a custom event, you can think this example: You are programming a clock class that you will use in the future. You code all the methods to make the clock work. Further, you declare a new event that triggers when a second passes. Let's call it "timestep".
Now imagine you use that class in two different programs. You can implement a different behaviour in both programs by inserting code in the "timestep" event.
In this example, I created a custom event that fires when the user moves one handle. It's behaviour consist in modify the label to the time the handle is on. Check it here:
http://ytcropper.com/crop/hsceS7udV4g

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.

onmouseover action on event registration

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?

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.

Adding an additional click event to every element (JavaScript / jQuery)

I'm developing a touchscreen application that, aside from everything else, records the amount of times the screen is used so that the user can be reminded to clean the screen after a predefined number of clicks.
I've got the click functions written nicely, all I need now is make sure the function is called on a click.
I imagine $('*').click(function() { //do something }); would accomplish my goal, but is that the best way? Also, would that overwrite other click functions assigned to the elements?
It would add, not override, but a better solution would be this:
$(document).click(function() {
//do something
});
Since clicks bubble, just listen up at the document level with one event instead of creating events on every element beneath. For the override part...you can add as many handlers as you want, they will just execute in the order they were bound.
The best way is to assign the event handler to document itself. The events bubble and document can catch them all, while still retaining the origin of the event.

Categories

Resources