Consider the following example:
HTML:
<div id="A">
<div id="B">
</div>
</div>
If a user hovers over element B and starts scrolling, we want to prevent the scroll event from affecting element A. How do we stop the scroll event from propagating?
UPDATE: I attempted this JavaScript code but it didn't work. Any suggestions?
document.getElementById("B").scroll = function(e) {e.stopPropagation();}
To prevent event bubbling, make sure to use event.stopPropagation(); For more details, check out this resource and view a jsfiddle demo
Here is an example of the HTML structure:
<div id="A">
<div id="B">
</div>
</div>
Below is the jQuery code snippet:
$( "#A" ).scroll(function( event ) {
alert('A scrolled');
});
$( "#B" ).scroll(function( event ) {
event.stopPropagation();
alert('B scrolled');
});
When invoking the event.stopPropagation() method, it effectively halts the event's propagation up to its parent elements, thus preventing any parent event handlers from running.
https://developer.mozilla.org/en/docs/Web/API/Event/stopPropagation
I have a file called file.js that is making a request to a PHP file in order to retrieve data from a database and return an encoded JSON object for display in a table. Here is the code from file.js: url = "backend.php"; xmlhttp.open("GET", url, true); xml ...
The code below functions without any query strings or with just one query string. For example, simply navigating to /characters will display all characters. However, if you specify a query string parameter like /characters?gender=male, it will only show ma ...
I am working on a screen that can display up to 1000 data retrieved from the API. Here is the image: https://i.sstatic.net/ErbDD.png Now, I have implemented a drop-down box where users can select alphabetically from A to Z. After selecting an alphabetic ...
I am in the process of setting up a new React application using the latest technologies available, including React 17, Webpack 5, and other essential modules. My goal is to implement CSS modules utilizing the styleName concept with the help of babel-plugi ...
Here is the JSON object that I am currently handling: { "name": "John Smith", "age": 32, "employed": true, "address": { "street": "701 First Ave.", "city": "Sunnyvale, CA 95125", "country": "United States" }, ...
Can anyone assist with making each of these inline? https://i.sstatic.net/YF9bu.png <div class="atc_nsv"> <ul> <li><img class="ad lazyloaded" data-src="//cdn.shopif ...
I'm encountering an issue when running npm start and trying to access the browser, I keep getting this error message in the stack trace. Error: $.ajax is not functioning properly at findLocation (G:\CodeBase\ExpressApp\routes\ind ...
$ node --version v13.8.0 We will now proceed to create three files: // package.json { "type": "module" } // foobar.js function foo() { console.log('foo') } export default {foo} // index.js import Foo from './foobar ...
Is there a way to utilize $(this) instead of an ID in the option select function in javaScript? var tot = 5 * ($( "#firstOne option:selected" ).text()); In the scenario mentioned above, I aim to substitute $(this) for #firstOne, allowing this functional ...
If I have the following code: function testA { setTimeout('testB()', 1000); doLong(); } function testB { doSomething(); } function doLong() { //takes a few seconds to do something } When I run testA(), what happens after 1000 mill ...
Dealing with a similar issue where things are not adding up correctly, I encountered a problem in a previous question about JavaScript variables only concatenating as strings. The pure JavaScript solution worked fine, so I have now consolidated all the cod ...
I have a div that is currently rotated at -35 degrees (as set in the CSS file). I would like to be able to click on it so that it rotates back to 0 degrees. Here is the code from my Javascript file: $("div#words").on("click",function(e){ $(this).anim ...
Currently facing an issue with adding a webpack extension to build my Vue app. Despite having Vue/cli which includes webpack, I have also attempted to install different versions of webpack without success. Anyone experienced the same problem and found a so ...
Searching for a similar type structure: type ArgsType<F extends Function> = ... which translates to ArgsType<(n: number, s: string)=>void> will result in [number, string] or {n: number, s: string} Following one of the provided solu ...
I have designed a 3D model using different elements: ParentObject-001.name = 'ParentObject-001'; ChildObjectA-001.name = 'ChildObjectA-001'; ChildObjectB-001.name = 'ChildObjectB-001'; Then, I combined them with: ParentObject ...
I am encountering an issue with a mat-dialog that opens through an edit button within a (mat-)table. Upon opening the dialog, data is passed to populate certain input fields. One of these inputs has validation requiring that it cannot be left empty. The ...
I am encountering difficulties when trying to test Bootstrap 4 menus using Capybara. Here is a snippet of the navigation menu: <div class="collapse navbar-collapse" id="navbarSupportedContent"> <ul class="navbar-nav"> <li class="nav- ...
I have a code that works perfectly, but the issue arises when I click on the add button and a new select option is added with a value instead of an id. How can I pass the Id to option.value = array[i]; ? var array = ["PACKING & LOADING","BAG GODOWN", ...
1. I am working with an array called "listOfPaysIndexes", which contains 12 indexes. My goal is to use this array to iterate through and display 12 DateInput fields. 2. Each of these fields can be clicked on to select a date. 3. Once a date is chosen in ...
I am currently working on refining a shopping basket function with Vue JS. One of the key features I need to implement is a subtotal calculation that multiplies the price and quantity values for each item and then combines them to create an overall subtota ...