When the mouse cursor hovers over a "div" element, Zoom functionality becomes disabled on Zoom

Within my threejs (i.e webgl) viewer, I am rendering simple 2D icons using div elements.

To enable zoom in and out functionality on my models similar to trackballcontrols, I handle the "wheel" event. While this works fine in most cases, there is one exception.

In a scenario where my mouse hovers over one of these 2D div elements, the "wheel" event does not reach the threejs viewer preventing the zoom action from taking place.

I am curious if there is a default "wheel" event handler for a div element and if not, what could be causing this issue?

Edit:

After some investigation, I discovered that using "pointer-events: none" partially resolves the issue by allowing the wheel event to pass through. However, this also removes the click property from the div element. What would be the best way to address this situation?

javascriptjqueryhtmlcssthree.js

Answer №1

This issue is more related to HTML/JavaScript rather than three.js.

If you want the wheel event to pass through, you can create and dispatch a new event.

Imagine the yellow div as your three.js canvas, and the green div as your "floating" div.

<div id="outer" style="border: 1px black solid; background: yellow; width: 200px; height: 200px; padding: 50px; position: relative;">
&nbsp;
</div>

<div id="inner" style="border: 1px black solid; background: green; width: 100px; height: 100px; padding: 50px; position: absolute; top: 50px; left: 50px;">
&nbsp;
</div>

<script>
var outer = document.getElementById("outer");
var inner = document.getElementById("inner");

outer.addEventListener("wheel", function (e) {
console.log("outer wheel event on ", e.currentTarget.id);
});

inner.addEventListener("wheel", function (e) {
var evt = new MouseEvent("wheel", {
view: window,
bubbles: true,
cancelable: true
});
outer.dispatchEvent(evt);
console.log("inner wheel event on ", e.currentTarget.id);
});
</script>

To ensure the proper information is sent to the TrackballControls events, you will need to fill in some blanks like the wheel delta. Check the TrackballControls code for the event properties used for the wheel events.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Automatically navigate to a specific element as the user scrolls down the page

I am attempting to achieve a similar effect as seen on the App Builder Website. When the user reaches the header with the background image/video and scrolls down, the website smoothly transitions to the next div/section. If the user scrolls back up and ret ...

javascriptjqueryhtmlscroll

Navigation Bar Dropdown Menu Not Responding to Clicks

I'm having trouble implementing a dropdown menu in my navigation bar that should appear when the user clicks and disappear when they click anywhere outside of it, similar to Facebook's dropdown menu with options like logout. However, for some rea ...

javascripthtmlcssdrop-down-menunavigationbar

Toggle visibility of div content when hovering over a link by leveraging the data attribute, with the div initially visible

I have a collection of links: <p><a href="#" class="floorplan initial" data-id="king"><strong>King</strong></a><br> 4 Bedrooms x 2.5 Bathrooms</p> <p><a href="#" class="floorplan" data-id="wood">< ...

javascriptjqueryhtmlcss

A guide on extracting data from various HTML elements effectively with JavaScript

I'm searching for a universal technique to extract values from multiple HTML elements. For instance: <div>Experiment</div> <select><option>Experiment</option></select> <input value="Experiment" /> These thr ...

javascriptjqueryhtml

Creating a 3D effect in a particle system through the utilization of a texture

Currently, I am attempting to create a depth map for a particle system. However, when I render the particle system using MeshDepthMaterial, each particle is only displayed as a single point for every vertex, rather than covering the entire area where the t ...

dictionarysystemthree.jsdepthparticles

What is the significance of the error message "Uncaught (in promise) Object"?

I am facing an error in my code and need help to correct and debug it. I would like the code execution to halt when an issue arises. Here is my code snippet: export function postRequestOtpCode(phone: string, token: string): CancellableAxiosPromise { ax ...

javascriptreactjsaxiospromise

What could be causing my default prop to not be transmitted to the child component in vuejs2?

Having trouble passing a default value to my Leaflet map child component before fetching the desired data from an API endpoint. I tried using country coordinates like latitude and longitude, but it's not working as expected. This is how I attempted t ...

javascriptvuejs2leaflet

Utilize the context API to efficiently share information from the parent to both its children and sibling children

I'm currently working on displaying fetched data in a child component using the context API, but encountering an error in the browser: TypeError: render is not a function The above error occurred in the component: in AppDataList (at App.j ...

javascriptreactjs

What is the best way to generate script code dynamically on an HTML page depending on the environment?

I am facing a challenge with my asp.net application. I need to insert a dynamic script into the html section, and this script's value must change depending on the environment (TEST, QA, etc.). To illustrate, here is the script where DisplayValue is th ...

javascripthtmlasp.net

When searching for live Ajax in PHP CI, the result is not being displayed on the

I'm puzzled as to why, when I enter names in the input field in this code, no results are displayed. Additionally, I'm getting a Json parser error in my console: SyntaxError: JSON.parse: unexpected character at line 2 column 1 of the JSON data ...

javascriptphpajaxjsoncodeigniter

Incorporating External HTML Content Using JQuery Function

Looking for assistance with a JQuery function: function addSomeHTML() { $("#mysection").html("<div id='myid'>some content here</div>"); } I am trying to have this part: <div id='myid ...

javascriptjqueryajax

Utilizing Vue.js: Dynamically Rendering Components Based on Routes

I needed to hide some components for specific Routes, and I was able to achieve this by using a watcher for route changes that I found in this StackOverflow question - Vuejs: Event on route change. My goal was to not display the header and sidebar on the c ...

javascriptvue.js

Attaching a synchronous event listener to a form's submit button using JavaScript

I am currently tackling a security project in Javascript, a language I am not very familiar with, and I seem to be encountering some difficulties with EventListeners. Here is an excerpt of my code: function prevclick(evt) { evt.preventDefault(); document. ...

javascriptdomevent-handlingsynchronizationdom-events

Tutorial on implementing an AJAX save button featuring a loading GIF in CKEditor version 4.2.1. [Interactive Plugin Demo Included]

Sharing this post as a helpful guide for anyone looking to display a save icon in ckeditor for normal and inline-editing mode. After struggling to find a working save plugin for ckeditor 4.2.1, I took matters into my own hands and created my own. In my res ...

jqueryajaxsaveckeditor

Stop MatDialog from closing automatically when clicked outside while there are unsaved changes

Is there a way to prevent closing when there are pending changes without success? this.dialogRef.beforeClosed().subscribe(() => { this.dialogRef.close(false); //some code logic //... }); The setting disableClose on MatDialog must remain as false ...

javascriptangulartypescriptangular-materialdialog

Implementing mixin functions in vue.router routes with Vue.js

Is there a way to dynamically change the title of the window based on each route? I have included a meta: { title: ... } object in each child object within the routes: []. Here is an example: routes: [ { path: 'profile/:id', name: 'Prof ...

javascriptvue.jsvue-routermixinsvue-mixin

Tips for automatically breaking or paginating HTML in order to ensure that the resulting PDF mirrors the paginated HTML layout

I'm looking to implement a feature that automatically breaks or paginates HTML content in order to ensure that the resulting PDF matches the appearance of the original HTML. Requirement: If HTML content exceeds the size of an A4 paper, it should be s ...

javascripthtmlcssvue.jspagination

Instructions on calling a function with AngularJS ng-click in a template rendered by a Grails controller

Is there a way to invoke a function using angularjs ng-click on a template that is rendered from a grails controller? I have tried, but the jQuery function call seems to work fine while the ng-click() function does not. What am I missing here? I'm rea ...

javascriptjsonangularjsgrailsangular-ng

Select2 Bootstrap - Preselecting Options

I am currently utilizing Bootstrap Multiselect but I am encountering some difficulties setting the default value for the multiselect as per the documentation provided. Inside a function, I have tried the following: $("#selector").multiselect("select", ["V ...

jquerytwitter-bootstrap

Leverage variables in mixins and extends within Less.js

When using a variable with mixin or extend in Less.js, the following code will result in an error: @bar : bar; .@{bar} { background: yellow; } // ParseError: Missing closing ')' .foo { .@{bar}(); } // This will not work .jam { &:ex ...

cssless