Handling Clicks on Custom Overlays

By default, when clicking on a custom overlay, page.press event also gets fired. There might be cases when you don’t want to do that.

Internally, page.press uses the browser’s onpointerup event. To prevent that event from firing, you’ll have to stop the propagation of the same event (onpointerup) from the custom overlay.

We recommend using the onpointerup event on the custom overlay instead of the onclick event:

PSPDFKit.load(options).then((instance) => {
  const div = document.createElement("div");
  div.className = "overlay"; // Give a height and width to the div so that it's practically clickable.

  div.onpointerup = (e) => {
    // Call `e.stopPropogation()` to stop the propagation of the `onpointerup` event and the `page.press` event won't be fired.
    e.stopPropagation();

    // Do what you wanted to do on click.
  };

  const item = new PSPDFKit.CustomOverlayItem({
    id: "id",
    node: div,
    pageIndex: 0,
    position: new PSPDFKit.Geometry.Point({ x: 50, y: 600 })
  });

  instance.setCustomOverlayItem(item);
});

This has been tested with PSPDFKit for Web 2019.5.4