Prevent scrolling using mousewheel click (auxclick event)

Question

Prevent scrolling using mousewheel click (auxclick event)

Currently working with Angular 9 and encountering an issue with the (auxClick) event triggering on a mousewheel click. The problem arises when attempting to use this event while there is a scroll present on the page, as it does not trigger correctly due to the automatic scrolling behavior associated with mousewheel clicks.

I am specifically looking to disable this functionality, which can be seen in action here: https://i.sstatic.net/c5hB7.png

Has anyone found a way to disable this behavior using JavaScript or TypeScript within an Angular environment?

Thank you for any assistance provided.

(Please note that utilizing preventDefault() has not proven effective, as the event itself fails to trigger, thus bypassing the need for any callback functions.)

javascript angular typescript events

Answer 1

Answer №1

If you want to stop the scroll effect on your element, there are a couple of ways to do it. You can achieve this using jQuery or Vanilla JS:

Using jQuery:

$('YourElement').on('mousedown', function(e) {
  if (e.which === 2) {
    preventDefault();
    // OR return false;
  }
});

Using Vanilla JS:

 document.getElementsByClassName("YourClassHere")[0].onmousedown = function(e) {
  if (e.which === 2) {
    preventDefault();
    // OR return false;
  }
};

You can also use getElementById for selecting elements by their id or getElementsByTagName for selecting elements by tag name. Just remember to adjust the index if needed when using getElementsByClassName, or remove it when using getElementById.

Answer 2

If you want to stop the scroll effect on your element, there are a couple of ways to do it. You can achieve this using jQuery or Vanilla JS:

Using jQuery:

$('YourElement').on('mousedown', function(e) {
  if (e.which === 2) {
    preventDefault();
    // OR return false;
  }
});

Using Vanilla JS:

 document.getElementsByClassName("YourClassHere")[0].onmousedown = function(e) {
  if (e.which === 2) {
    preventDefault();
    // OR return false;
  }
};

You can also use getElementById for selecting elements by their id or getElementsByTagName for selecting elements by tag name. Just remember to adjust the index if needed when using getElementsByClassName, or remove it when using getElementById.

Prevent scrolling using mousewheel click (auxclick event)

Answer №1

Using jQuery:

Using Vanilla JS:

Similar questions

Tips for dividing the rows within an array using the match() function?

Create an NPM package using the open-api-generator gradle plugin

Ways to send data to a popup in svelte

When it comes to the CSS `:visited` pseudo-class, I have

What is the best way to create a fresh revision with every build in Vue.js?

What is the best way to generate conditional test scenarios with Protractor for testing?

Angular routing is showing an undefined ID from the snapshot

Managing Jawbone API OAuth access tokens using node.js (express and passport)

What is the process to ensure a React JS click handler updates the DOM upon execution?

Guidelines on incorporating several JavaScript functions with variables in a single file

What is the most effective way to determine which radio button is currently selected in a group with the same name using JQuery?

Troubleshooting ES Lint Issue: Passing Parameters to a Vue Method

Angular2: Retrieving the XLS file received from the backend

Tips for restricting access to specific routes in VueJS using Store state

for each and every object, execute the asynchronous function

Whenever I clear the contents of the datatable, I notice that 2 thead elements

Passing a function as a prop within a loop in ReactJs: Here's how to

Retrieving a variable's value for use in a jQuery UI function

Webpack is unable to properly parse TypeScript files, resulting in a module parse error that states: "Unexpected token

Encountering a syntax error when trying to parse a local storage object?