question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Canvas blocks mouseup events on itself.

See original GitHub issue

Calling jQuery(viewer.canvas).on("mouseup", function() { console.log("mouseup"); }); does not work. Neither does using openSeadragon’s .addEvent method for “mouseup”.

Issue Analytics

  • State:closed
  • Created 9 years ago
  • Comments:34 (21 by maintainers)

github_iconTop GitHub Comments

1reaction
iangilmancommented, Aug 10, 2016

Interesting. The general procedure is to use OpenSeadragon.MouseTracker to handle events on overlays, but I guess maybe that wouldn’t hook into React very well.

Under the hood setMouseNavEnabled calls the setTracking function of the viewer’s MouseTrackers… at the moment there’s no mechanism to be more specific than all on or all off.

Anyway, MouseTracker is where to look if you want to dig in more.

0reactions
iangilmancommented, Aug 15, 2016

Hopefully @msalsbery can weigh in because he understands the gesture handling better than anyone. My understanding is that the swallowing was necessary in order to properly handle gestures on devices that handle more than one kind of gesture. OSD supports mouse, touch, and pen gestures, and some devices, like the Microsoft Surface support all three simultaneously. I believe it’s keeping all those straight that means we need to stop the events from propagating. @msalsbery can weigh in though.

If you want to dig in deeper, look for stopEvent and stopPropagation in the MouseTracker source. Maybe there’s a way to keep everything straight without stopping the events…

Read more comments on GitHub >

github_iconTop Results From Across the Web

Is there a way to make an element disappear BEFORE the ...
In short, the simple solution is to just have one event handler on a mousedown, eg body.mousedown which means you want to do...
Read more >
Drag'n'Drop with mouse events - The Modern JavaScript Tutorial
So here we'll see how to implement Drag'n'Drop using mouse events. ... On mouseup – perform all actions related to finishing the drag'n'drop ......
Read more >
HTML5 Canvas Shape Events | Konva - Konva
To detect shape events with Konva, we can use the on() method to bind event handlers to ... and mouseover, mouseout, mousedown, and...
Read more >
1.6. Event Handling | HTML5 Canvas Essentials - InformIT
Detecting mouse events in a canvas is simple enough: You add an event listener to the canvas, and the browser invokes that listener...
Read more >
Element: mousemove event - Web APIs | MDN
The following example uses the mousedown , mousemove , and mouseup events to allow the user to draw on an HTML canvas. Its...
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found