Mouse events on the timeline

Hello.

I could paste events with html tags and add some event listeners for this html elements. But now when I tried to add event listeners to icon on the timeline (for example:" $(document).on('click', '.myClass',function); "), this would not work. In firefox I can add "mouseup" and "mousedown" events, but in IE 10 it will not work. I have tried to use "clickToUse" option. I thought that it would enable mouse events on the timeline area, but it didn't work.

Thank You.

added Timeline label

Thanks for your suggestion. Support for listeners on mouse events would be nice indeed.

In your case you may be interested in creating your items from a template, where you can inject your click listeners on creation of an item. http://visjs.org/docs/timeline.html#Templates

Thank You.

I just want to say, that in older library version , before templates were added, all listeners had worked fine. But now it doesn't work.

that's weird. Is it possible for you to write a small jsbin/jsfiddle to demonstrate the issue?

Yes, I can. But I need link to library by version 3.1.0,(js,css), because jsbin doesn't allow to upload so big file with library code. Or I can upload small example to dropbox.

And one more: As You said, I can use "template" for event binding, I have tried to do this, and I found, that I can use this by only one way: template: function (item) {

return "

" + item.content + "

"; },

Unfortunately I can't add event listeners in the way like that: template: function (item) {

return $('

').append(item.content).bind('click',function(){alert(123)}); },

So users will be able to see my events,arguments etc. And my HTML code will be dirty.

I was able to upload code to jsfiddle. http://jsfiddle.net/dp9d561e/ Also You can see how issue #317 (closed) is replicate in this example

I am using angularJs and had set up a double click event on the whole timeline to use when an item is double clicked. Today I upgraded from 3.3 to 3.5 and the event is not thrown when I double click an item. It is however thrown when I double click an empty space on the timeline.

Thanks, I could reproduce this with the following minimal example: http://jsbin.com/varemi/3/edit

This is indeed broken in version 3.4 and newer.

added 1 deleted label

I'm having the same issue in my web application... links within HTML embedded in timeline items are no longer clickable (passing custom class and looking for .on). Worked fine in old CHAP LINKS timeline but broken in vis.

NOT a solution but perhaps a clue:

Around line 10900 of vis.js *ItemSet.prototype._onSelectItem = function), I was thinking the line at the bottom of the function was the problem... so COMMENTED IT OUT: //event.stopPropagation();

No change, but if I ALSO "enumerate(event);" at the TOP of the function, it somehow makes my item embedded links work again (but also throws a .length error in the enumerate).

I don't understand any of this but thought the extra bit of info might help locate the source of this issue. Upgrading (chap links --> vis) is the obvious route to go but losing this functionality needs to be addressed. I'm going to keep troubleshooting in hopes of finding the solution.

Can't wait to get the basics converted so can take advantage of the nice new capabilities in vis!

Thanks for the extra info. The cause of the issue is that the event bubbles in the wrong direction: When you have an item containing an onclick listener, first the select event (attached to the parent DOM) is fired, and then the onclick listener, whilst this should be the other way around (child first, then parent). I'm not sure why this happens and whether this is going wrong in vis.js or in hammer.js.

in v3.4 and newer, the item replaces it's DOM on selection, which breaks the event. I have fixed this problem by only updating the DOM when the content is changed (not when the className changes), and not stoping propagation. That works, though the events still bubble the wrong order which is weird...

You can try the develop branch to check whether this actually solves the issue.

I downloaded vis.js from the /develop branch and replaced my version (with event.stopPropagation(); commented out) with it.

It now handles clicks within my item HTML content, all within a viewport, so this appears to be working as expected. I have not seen any issues with it. You can see it here:

http://podDVR.com

A couple of my problems, however, may have been due to my lack of understanding of the basic template system. I'm having to address that in a few more areas, too, but can see where it is preferable in the long run anyway.

Thank you very much... it just keeps getting better!

Ok thanks for your feedback!

closed with commit 4a3acd62

mentioned in merge request !802 (closed)