Paper.js: why does tool.onMouseDown not trigger?

Question

I'm creating a web application that uses Paper.js to manipulate vectors that are imported through SVG. Up until recently, everything worked. Then, all of a sudden, the onMouseDown event stopped getting triggered, even though onKeyDown and onMouseMove trigger just fine.

I create an instance of a Tool object like this:

paper.setup("canvas");
var tool = new paper.Tool();
tool.activate();

Then I bind events later in the code like this:

tool.onMouseDown = function (event) {
  console.log("Mouse down triggered!");
}
tool.onMouseMove = function (event) {
  console.log("Mouse move triggered!");
};

For some reason the latter does trigger, but the former does not. Other events like onKeyDown and onKeyUp trigger as well, but onMouseDown and onMouseDrag don't do anything. Does anyone have an idea what's causing this? I'm also using jQuery and jQueryUI, maybe that causes some kind of interference?

Answer 1

I had the same effect. It was caused by an overlaying html element eating up the click events. Add

style="pointer-events:none;"

to the elements html definition and then both events should trigger you paper.js object.

The full line reads:

<div id="colorizerOptions" style="pointer-events:none;"></div>