Loading Profile...
How do I add an event handler for a click without dragging?
I have the following code to add a mouse click event:
Seadragon.Utils.addEvent(viewer.elmt, "click", checkNode);
works great, when the mouse is clicked my checkNode function is called. Problem is that function is called even when the mouse is clicked only to drag the image around. I only want checkNode to be called if the mouse was not dragged. Or at least I'd like to be able to check if the mouse was dragged within checkNode. Is this possible?
Seadragon.Utils.addEvent(viewer.elmt, "click", checkNode);
works great, when the mouse is clicked my checkNode function is called. Problem is that function is called even when the mouse is clicked only to drag the image around. I only want checkNode to be called if the mouse was not dragged. Or at least I'd like to be able to check if the mouse was dragged within checkNode. Is this possible?
2
people have this question
I have this question, too!
Tell me when someone answers.
The more people who ask this question, the more it gets noticed.
The more people who ask this question, the more it gets noticed.
The best answer from the company
-
Sure is! Try using the MouseTracker class instead. The clickHandler function gets a quick parameter that will only be true if the mouse wasn't dragged or held.
Try something like this:
var tracker = new Seadragon.MouseTracker(viewer.elmt);
tracker.clickHandler = function(tracker, position, quick, shift) {
if (quick) {
checkNode();
}
};
tracker.setTracking(true);
Let me know if that doesn't work.
The company says
this answers the question
-
Inappropriate?Sure is! Try using the MouseTracker class instead. The clickHandler function gets a quick parameter that will only be true if the mouse wasn't dragged or held.
Try something like this:
var tracker = new Seadragon.MouseTracker(viewer.elmt);
tracker.clickHandler = function(tracker, position, quick, shift) {
if (quick) {
checkNode();
}
};
tracker.setTracking(true);
Let me know if that doesn't work.
The company says
this answers the question
-
Inappropriate?Hi Aseem, ok so this works great. However, none of my regular html links work anymore within the visualization. I have a control that is a link to a flash version of my visualization which is editable (and inferior :), but I need the editing capability). I also have popups as I described in the thread on z-indexes when you click on certain nodes within the visualization. These popups (now they are controls with Seadragon.ControlAnchor.NONE) have links within them that just call viewport.panTo and zoomTo. None of these links work. You can click on them and they change color like links normally do. But you're not taken anywhere... -
Inappropriate?Hey Scott,
Sorry to hear. This is because MouseTracker automatically cancels some events depending on what handlers you have registered. This makes sense most of the time -- e.g. you don't want the page to scroll when you're zooming in on the image, or text to get selected when you're dragging -- but it does cause problems like these.
I went back and checked, and yep, we ran into the same problem with our about screen. We worked around it by adding an event listener to the link that stopped the event (i.e. prevent it from bubbling up) so that the parent node which had a clickHandler registered wouldn't cancel it.
Seadragon.Utils.addEvent(someLink, "click", Seadragon.Utils.stopEvent);
If you have a lot of links, you can do this for each one using the each() function (or similar) in jQuery/Prototype/etc.
This is totally not ideal, and I've filed a bug that the MouseTracker API should be more flexible; e.g. you should be able to easily specify if you want a certain event to be canceled or not. Unfortunately, this is an API-level change so it probably won't make it out for a while, so I hope this workaround is okay in the meantime.
By the way, I want to ask -- are you sure you want to be adding this clickHandler on viewer.elmt? That encompasses not just the image, but also the controls. If that's what you want, cool, but just checking. =)
And one last thing -- do you want your clickHandler to NOT execute when a link is clicked? The clickHandler on the about screen closes the screen, but we don't want to close the screen when you click the link. To get this behavior, you'll want to also stop the "mouseup" event from bubbling from the link. This is also not ideal and a temporary workaround. But if it's not necessary for you, all the better.
Hope this helps!
Aseem
-
Inappropriate?This is a perfectly acceptable workaround for me and doing this for each link is fine. However, I notice now when using MouseTracker (with or without that stopEvent handler) in Safari AND FIREFOX 3.0.6 (on mac) I get the following message when I click anywhere:
"localhost:8080
Sorry, but Seadragon Ajax can't run on your browser!
Please try using IE 7 or Firefox 3."
I may have not noticed this before because I was testing on a PC? If a stop event handler was added to the link, the link is followed so that's good. I think I do but am not sure I understand this whole stopping the click event so a parent node doesn't cancel it concept, I'm pretty new to javascript and have no idea how event propogation works.
Regarding wanting to apply the click handler to check if a node was clicked on the whole viewer.elmt, which includes controls, I guess I'd prefer this not to include the navigation controls or my edit button as 2 different actions happening with a mouse click can be confusing. But my other 2 controls are text messages (1 only fades in when the zoom level passes a threshold) and I would expect click in that area to apply to the visualization. -
Inappropriate?Hey Scott,
Sorry for the delay. That's really weird, though. I asked around and none of us have seen that on the Mac.
Whenever that message pops up, we output the specific error message to the error console. Can you open up the error console when that happens and see what the message is?
(In Firefox, this is under Tools > Error Console. In Safari, it's under Develop > Show Error Console, but you may have to go to Prefs > Advanced and check "Show Develop menu bar".)
Thanks for your help, as usual! =)
Aseem
EMPLOYEE
