Is there a way to restrict mouse access to certain areas on a webpage using JavaScript? I want to programmatically change the position of the cursor when it enters these restricted zones. Essentially, I am looking to create non-mouseable areas on the page.
Can you provide guidance on how to achieve this functionality in JavaScript?
One cannot control the movement of the mouse pointer using JavaScript. However, if you are interested in changing the position of an element when the mouse cursor moves to a specific area, you can achieve this with the following code:
var elm = document.getElementById( 'area' ),
rct = elm.getBoundingClientRect(),
elW = rct.width,
elH = rct.height,
mrg = 50;
document.addEventListener( 'mousemove', function( e ) {
var vpW = Math.max( document.documentElement.clientWidth, window.innerWidth || 0 ),
vpH = Math.max( document.documentElement.clientHeight, window.innerHeight || 0 ),
rec = elm.getBoundingClientRect(),
elL = rec.left,
elT = rec.top,
mLp = e.pageX,
mTp = e.pageY,
eLp,
eTp;
if ( mLp > elL - mrg && mLp < elL && mTp > elT - mrg && mTp < elT + elH + mrg ) {
eLp = mLp + mrg;
if ( mLp + mrg + elW > vpW ) eLp = mLp - mrg - elW
}
if ( mLp > elL && mLp < elL + elW + mrg && mTp > elT - mrg && mTp < elT + elH + mrg ) {
eLp = mLp - mrg - elW;
if ( mLp - mrg - elW < 0 ) eLp = mLp + mrg
}
if ( mTp > elT - mrg && mTp < elT && mLp > elL - mrg && mLp < elL + elW + mrg ) {
eTp = mTp + mrg;
if ( mTp + mrg + elH > vpH ) eTp = mTp - mrg - elH
}
if ( mTp > elT && mTp < elT + elH + mrg && mLp > elL - mrg && mLp < elL + elW + mrg ) {
eTp = mTp - mrg - elH;
if ( mTp - mrg - elH < 0 ) eTp = mTp + mrg
}
elm.style.left = eLp + 'px';
elm.style.top = eTp + 'px';
} )#area {
position: absolute;
width: 50px;
height: 50px;
left: 50%;
top: 50%;
border: 3px solid #888;
background-color: #aaa
}
#area:hover {
background-color: red
}<div id="area"></div>However, it is generally not advisable to restrict the mouse cursor from entering an element's area. A better approach would be to hide the element as the mouse cursor approaches it. You can achieve this effect with the following code:
var elm = document.getElementById( 'area' ),
rct = elm.getBoundingClientRect(),
elW = rct.width,
elH = rct.height,
elL = rct.left,
elT = rct.top,
mrg = 30;
document.addEventListener( 'mousemove', function( e ) {
var mLp = e.pageX,
mTp = e.pageY;
if ( mLp > elL - mrg && mLp < elL + elW + mrg && mTp > elT - mrg && mTp < elT + elH + mrg )
elm.style.display = 'none'
else
elm.style.display = 'block'
} )#area {
position: absolute;
width: 50px;
height: 50px;
left: 50%;
top: 50%;
border: 3px solid #999;
background-color: #aaa
}
#area:hover {
background-color: red
}<div id="area"></div>If you find the above solutions suitable, you can achieve the same effect without using JavaScript and relying purely on CSS:
#parent {
position: absolute;
padding: 1px;
left: 30%;
top: 30%
}
#parent:hover > div#area {
opacity: 0;
cursor: none
}
#area {
cursor: default;
opacity: 1;
width: 50px;
height: 50px;
border: 3px solid #999;
background-color: #aaa
}<div id="parent">
<div id="area"></div>
</div>Regrettably, I discovered that this functionality is not available in JavaScript after conducting some research. If you're interested, you can check out my source here.
This could potentially lead to privacy issues since a user may not want to struggle for control over their mouse.
I've been working hard to integrate this amazing wizard controller into my project: However, I've hit a roadblock with two-way binding not functioning as expected outside of the <section> attribute: http://plnkr.co/edit/N2lFrBRmRqPkHhUBfn ...
I'm encountering an issue with the code present in index.html: $(document).ready(function() { $('#generate').click(function() { //$("#results").empty(); $("#results").html(""); $("#results").load("generate.php"); }); }); In addition ...
Why is my empty string validation not functioning correctly for the value property of an HTMLInputElement after trimming? The issue lies in the code within the storeOnEnter function. My intention is to update the state only when the input field is empty. ...
My current challenge involves using Appium to automate a framework I've created. After inspecting an element with Appium inspector, I'm attempting to click on the element within the DOM, even though it's not visible on the device screen. I t ...
Greetings! I am currently working on a project involving the Spotify API and attempting to retrieve new releases. While the data is successfully passed down to the reducer, I encounter an issue when calling the fetch action in my App component. When I try ...
Is there a way to manage non-matching paths using plain JavaScript in React router configuration? const rootRoute = { component: 'div', childRoutes: [ { path: '/', component: App, childRoutes: [ requir ...
I have a unique collection of product names along with their respective versions stored in a multidimensional array. My goal is to design an interactive interface that allows users to first select a product from a drop-down menu and then choose the version ...
Still grappling with the concept of Node's non-blocking nature. The code below executes as expected, but I'm curious if there's a more efficient way to achieve the same result. The route is taking 3 parameters (zipcode, type, rad) and using ...
I have successfully implemented this code on my page without any errors, but I am wondering if there is a more concise way to achieve the same result. Currently, there is a lot of repeated code with only minor changes in class names. Is it possible to sh ...
Currently, I am working on a small POS project. In this project, I have two tables. The main purpose of the first table is to retrieve products from a search box with two column names retrieved from the database. If the products are found, I want to be abl ...
I've been working on developing a Progressive Web App (PWA) using next.js and running into some challenges. My goal is to incorporate device motion, geolocation, and notifications into my users' accounts. I'm taking inspiration from this r ...
When I run ng build --prod on my Angular 7 application (which includes a C# app on the BE), I encounter the following error: ERROR in scripts.db02b1660e4ae815041b.js from Terser Unexpected token: keyword (var) [scripts.db02b1660e4ae815041b.js:5,8] It see ...
Issue: I am facing a problem with two containers that have overflowing text content like this: https://i.sstatic.net/wsasV.png In this setup, the blue <div>s have overflow:hidden applied. Now, I am trying to synchronize the scrolling behavior of th ...
My DOM structure is pretty straightforward, consisting of a textarea, some buttons, and links. I've attached a select eventlistener to the textarea to monitor text selection by the user. const summary = document.getElementById("summary"); summary?. ...
I am currently utilizing Laravel 5.7 in combination with Vue2 and Vuex. While working on my project, I have encountered an issue where Vue is not returning a store value after the dispatch call completes. The workflow of my application is as follows: Wh ...
I am currently working on a .net core project where all client-side scripts are written in TypeScript. I have a desire to incorporate Vue.js into the TypeScript codebase. Below are snippets of the necessary configurations: tsconfig.json { "compilerOpti ...
I am new to react and struggling with a basic issue. I need help passing an array of values from an external service as a prop to another component. Approach render() { let todolist="default"; axios.get('http://localhost:8888/todoitems').t ...
As a newcomer to Node, I appreciate your patience with me. I recently utilized the express generator module with the -hbs flag to switch from the default templating engine to Handlebars. Currently, I am attempting to register a custom helper to enable me ...
Within my loop, I am creating objects where each new object relies on the ID of the previously inserted object. Unfortunately, it appears that at times the insertion process is not completed before moving on to the next iteration. As a result, the final o ...
Objective Create a program to analyze user engagement data for a hypothetical menu planning calendar app. The program should be able to track the activity of users based on their meal planning within the app. Data Overview In the ./data folder, there ...