Is there a way to customize event property setters such as event.pageX in JavaScript?

Question

Is there a way to customize event property setters such as event.pageX in JavaScript?

Is there a way to bypass event.pageX and event.pageY for all events? This is because IE10+ has a known bug where it sometimes returns floating point positions instead of integers for pageX/Y.

javascript

Answer 1

Answer №1

It is not possible to override this native property, but you can create your own getter:

MouseEvent.prototype.getPageX = function() {
    return Math.ceil(this.pageX);
}

Instead of using event.PageX, you can now use event.getPageX()

Sidenote: I conducted a small experiment to demonstrate the impossibility of overriding. By setting up an event listener that logs the event instance when clicked anywhere on the page:

var bod = document.querySelector("body");

bod.addEventListener("click", function(e) {
    console.log(e);
});

I then attempted to modify the MouseEvent constructor:

var M = MouseEvent;
MouseEvent = function() {
    M.apply(this, arguments); 
    this.pageX = Math.ceil(this.pageX+15000);
}

Despite these changes, when clicking on the screen, the browser creates a new instance of MouseEvent in its own language rather than JavaScript. This proves that properties cannot be overridden in this scenario.

To further illustrate, attempting to manually create a new event will result in failure:

var evt = new MouseEvent("click", {
    canBubble: true,
    cancelable: true,
    view: window,
  });

This statement will throw an error, emphasizing that standard clicks do not utilize JavaScript's new MouseEvent and therefore cannot be overridden.

Answer 2

It is not possible to override this native property, but you can create your own getter:

MouseEvent.prototype.getPageX = function() {
    return Math.ceil(this.pageX);
}

Instead of using event.PageX, you can now use event.getPageX()

Sidenote: I conducted a small experiment to demonstrate the impossibility of overriding. By setting up an event listener that logs the event instance when clicked anywhere on the page:

var bod = document.querySelector("body");

bod.addEventListener("click", function(e) {
    console.log(e);
});

I then attempted to modify the MouseEvent constructor:

var M = MouseEvent;
MouseEvent = function() {
    M.apply(this, arguments); 
    this.pageX = Math.ceil(this.pageX+15000);
}

Despite these changes, when clicking on the screen, the browser creates a new instance of MouseEvent in its own language rather than JavaScript. This proves that properties cannot be overridden in this scenario.

To further illustrate, attempting to manually create a new event will result in failure:

var evt = new MouseEvent("click", {
    canBubble: true,
    cancelable: true,
    view: window,
  });

This statement will throw an error, emphasizing that standard clicks do not utilize JavaScript's new MouseEvent and therefore cannot be overridden.

Is there a way to customize event property setters such as event.pageX in JavaScript?

Answer №1

Similar questions

Troubleshooting problem in Vercel with Next.js 13 application - encountering "Module not found" error

Tips on introducing a random pattern into a Javascript gaming experience

Transmit a data element from the user interface to the server side without relying on the

Using props as classnames in next.js applications

Is it possible to verify the presence of an ID with jQuery?

"Enhancing Error Handling in Express with Node.js Middleware for Parsing

Modifying an image with jQuery

'AngularJS' filtering feature

Converting HTML Javascript to JAVA with the help of Selenium

NuxtJS (Vue) loop displaying inaccurate information

What are the steps for importing KnockOut 4 in TypeScript?

The complexities of stopPropagation() causing further confusion

Using PHP and XML with Ajax can run into problems with the getElementsByTagName function in Internet

Adding input values to a jQuery Ajax POST request

Handlebars template engine does not support query parameters

During bundling, utilize an npm script to copy the package.json file to the dist directory

What's the best way to ensure a div's height and width are equal when implementing responsive design?

What is the best way to generate a JSON output that contains the entire

Adding a URL link to a mentioned user from angular2-mentions within an Angular 4 application can be achieved in the following way:

JS | How can we make an element with style=visibility:hidden become visible?