We Keep Coding

Controlling Events for Nested React Elements

In an effort to add favoriting to a application menu, I'm working on getting onMouseEnter events to fire only on the element that is currently hovered. The problem is that due to these items being nested, onMouseEnter will fire on both the child element and the onMouseEnter of the parent element will also fire.
Ie:
HTML Nesting
The ideal behavior would be this:
Ideal Behavior
But the actual behavior is this:
Actual Behavior
I have already tried stopPropogation, but the problem is that there is a separate event listener on each of the menu items (both the L1 and the L2 have their own on mouse enter listeners). As such, capturing the event at the L2 level doesn't stop the event from firing at the L1 level.
Does anyone know of a way to only trigger the L2 event? Ideally, we wanted to be able to keep hover state specific to each item (ie don't have to have pass handlers for "setIsChildElementHovered"), but open to any ideas people have.

Did you try to add the event only on the child element ? If you have some snippets code might to answer your question. thanks :)

Change event color if overlaps happens while dragging in fullCalendar

I am building a calendar like this one fullcalendar external dragging. What I want to achieve sounds easy, but I found is not. I need, while dragging one of the external events to one specific day in day view, that if overlapping is detected the event changes its color immediately, but color must switch back if overlapping is no longer detected. I thought that in the drop callback(not dropEvent callback) I could be able to make some sort of comparisson, but looks like if the drop listener were outside of the scope of the calendar because I cant access to the ObjectEvent, or at least I dont know how.
In essence, change the color while dragging an external event into the calendar if, for instance, overlapping is detected

I think this is a weird requirement. Ideally, the color should be customizable per event.
However, I would suggest something that validates your event. Basically, save the original state of the event object. Trigger a validation when it hovers over a zone. Revert back when you leave the zone.
I'm not exactly sure you to see the list of events already in the day.
It's not a great solution but it should work.

I found it. There is an event which handles it in fullCalendar: EventReceive.
Basically it is called after drop() and is the one that builds the calendar'event object right after the drop event ends.
So, if you are dragging an external eventObject to the calendar and you need, for instance, checking overlapping for this external object, this is the man, I mean, the event.

C3 js ondragend event

I'm looking to build something similar to what is outlined here: How to override the dragging events in C3.js, but instead of overwriting the drag event I just want to call a function when the drag end occurs, in order to get all selected elements.
I see C3 offers this option here but there is no mention of an event which occurs at the end of the selection.
Is there a way to capture the end of the event in order to run the selected items through a function?

C3 has the start of allowing custom callbacks in the documentation, but according to https://github.com/masayuki0812/c3/issues/798 the ondragstart / ondragend callbacks do not do anything.

Double click event for Kendo Treeview control items for MVC

1.What I have is a Kendo TreeView control similar to the below structure.
- Parent 1
- Child 1 of Parent 1
- Child 2 of Parent 1
- Parent 2
I need to trigger an event on Double click of any of the items listed above in the treeview.
There exists an event for single click, that is .Select(). But I don't seem to find one for double click.
Is there any way to trigger a double click event from the control itself, if not, what is the suggested alternate for the same?
Any help/suggestions appreciated
Thanks in advance
PS: I'm using Kendo Trial Version for my POC and want to check whether I'll be able to implement the desired funtionalities for my project before it commenences.

best practices for designing a page with lots of events

So I have a grid on a page that displays tablular data, with a checkbox by each row.
So in this situation, when a checkbox is clicked, allot of things will react on the page potentially.
Also, if a button is clicked, again allot of things will potentially react on the page.
So say if someone checks a checkbox, the row should be highlighted, there is a toolbar that will show/hide buttons, etc.
If someone were to click on the toolbar directly, again things similar to when the checkbox was clicked will react.
So what I want to do is this, whenever a checkbox is clicked, or whenever a toolbar button is clicked, I want to 'announce' to anyone who is listening that this event occurred.
I can then, based on the source of the event, react in a similar or different manner.
how to best go about designing things like this?

I think you want to look into using the Observer Pattern. Basically, interested parties subscribe or listen for an event on a publisher, and when the event occurs, the source notifies all the listeners of it.

two things come to mind:
1. event delegation (you don't want to bind to each input on the grid)
look at this link to a great way of doing this while also maintaining a clean code:
by ben nadel
2. using custom events, or even better - use this pub/sub plugin
i have a large grid like this in my app that evolved over time, and manually binding to each input + responding in different ways caused the code to be a "bit" ugly,
It's great that you now where you are going and prepare up front

You could try YUI Custom Events. This allow you to fire off your own "event" which listeners can hear.

I like how it works with jquery, since you can bind an event to many
elements at once.
$("input[type=checkbox]").click(function(e){
alert(e.currentTarget.id);
});
This code would make all checkboxes alert their name. Of course, by using css classes,
you could bind a subset of all checkboxes to create an action.
$("input[type=checkbox].cssClass").click(function(e){
someOtherFunction(e.currentTarget);
});