Ways to allow scroll events on top of an overlay without passing click events

Question

Ways to allow scroll events on top of an overlay without passing click events

My goal is to develop a unique map annotation tool with custom controls, not relying on the built-in features of map providers.

Imagine something like this:

https://i.sstatic.net/70Yj7.gif

I had the idea of placing a canvas over the map for this purpose.

However, I encountered a challenge: when the overlay is present, zooming in and out on the map using the scroll wheel becomes disabled.

If I apply pointer-events: none to the canvas, I lose the ability to draw on it as well.

To see a demo of the issue, visit: https://codepen.io/vandrieu/pen/qBqdpzX?editors=1010

Is there a way to allow drawing on the canvas while still enabling zoom functionality on the map through mouse scrolling?

How would you approach solving this dilemma?

javascript html css canvas html5-canvas

Answer 1

Answer №1

After taking inspiration from Rojo's comment, I delved into event dispatching and crafted a method to send an event to another element.

function redirectEvent(eventType, fromElementSelector, toElementSelector) {
  const fromElement=document.querySelector(fromElementSelector)
  const toElement=document.querySelector(toElementSelector)
  fromElement.addEventListener(eventType, function (event) {
    toElement.dispatchEvent(new event.constructor(event.type, event));
    event.preventDefault();
    event.stopPropagation();
    //event.stopImmediatePropagation();
  });
}

However, I faced obstacles,

Initially, the scroll event didn't trigger. It dawned on me that I should be using wheel instead of scroll.

Moreover, the attempt to dispatch the event in this manner:

redirectEvent("wheel", '#canvas2', '#map2')

Was unsuccessful. I speculated that maybe I needed to target the canvas within the map (which is drawn using a canvas).

Hence, I modified it to:

redirectEvent("wheel", '#canvas2', '#map2 canvas')

Yet, it still didn't yield results.

The issue was that upon page load, the canvas inside the map wasn't rendered yet.

But with a bit of patience:

setTimeout(() => {
redirectEvent("wheel", '#canvas2', '#map2 canvas')   
},2000)

Success!

Witness the updated demonstration (map number 2): https://codepen.io/vandrieu/pen/qBqdpzX?editors=1010

Answer 2

After taking inspiration from Rojo's comment, I delved into event dispatching and crafted a method to send an event to another element.

function redirectEvent(eventType, fromElementSelector, toElementSelector) {
  const fromElement=document.querySelector(fromElementSelector)
  const toElement=document.querySelector(toElementSelector)
  fromElement.addEventListener(eventType, function (event) {
    toElement.dispatchEvent(new event.constructor(event.type, event));
    event.preventDefault();
    event.stopPropagation();
    //event.stopImmediatePropagation();
  });
}

However, I faced obstacles,

Initially, the scroll event didn't trigger. It dawned on me that I should be using wheel instead of scroll.

Moreover, the attempt to dispatch the event in this manner:

redirectEvent("wheel", '#canvas2', '#map2')

Was unsuccessful. I speculated that maybe I needed to target the canvas within the map (which is drawn using a canvas).

Hence, I modified it to:

redirectEvent("wheel", '#canvas2', '#map2 canvas')

Yet, it still didn't yield results.

The issue was that upon page load, the canvas inside the map wasn't rendered yet.

But with a bit of patience:

setTimeout(() => {
redirectEvent("wheel", '#canvas2', '#map2 canvas')   
},2000)

Success!

Witness the updated demonstration (map number 2): https://codepen.io/vandrieu/pen/qBqdpzX?editors=1010

Ways to allow scroll events on top of an overlay without passing click events

Answer №1

Similar questions

Execute a single test from a particular test suite using Jest

"Displaying mongoose date in the HTML5 input type date format (dd/mm/yyyy) is a simple process that can

What is the reason onbeforeunload does not fire requests in Safari browser?

Using the float property in IE7 can cause a line break and may result in other divs being pushed down

Looking to align three divs side by side in the center

Ensure that Colorbox remains centrally positioned even while scrolling

One effective way to redirect after a PUT request and display a one-time message

What are the steps to take in order to successfully deploy an Express server on GitHub Pages?

Guide to developing a custom plugin for Nuxt.js

Aligning text in the middle of an image both vertically and horizontally

Refreshing the page causes ngRoute to malfunction or results in an unknown route error

The v-menu closes before the v-list-item onclick event is detected

Tips for handling arguments in functional components within React applications

Spin the content of a div after a button click with the power of jquery and css

The addition of input fields on keyup creates problems in the initial field of each row

Is there a method available to streamline the process of generating .json files for language translations?

Custom directive with nested objects within a scope object

Understanding Joi validation - setting a field as optional depending on the input received

Using React Bootstrap, you can ensure that only a single collapse opens at a time when rendering it with a map function. This allows you to display

Error: Attempting to access properties of an undefined object (specifically, the 'prototype' property) within a React application