Using JavaScript to obtain the coordinates of a click event from a programmatically triggered click on an HTML element

Is there a way to programmatically simulate a click event on an HTML DOM element and still retrieve the screenX/screenY and clientX/clientY coordinates successfully? When manually clicking the element, the coordinates are visible in the console, but when triggered programmatically, all coordinates show as 0.

Here are my questions: Q1: Why are the coordinates returning as 0 even though the element is well-positioned? Q2: What adjustments can be made to retrieve the correct coordinates?

Note: The main objective is to create a C# Selenium IJavaScriptExecutor compatible JavaScript code that can capture the current coordinates of an HTML element with a known id attribute. These captured coordinates will then be used as input for creating and simulating a mousewheel event, crucial for zooming functionalities.

<!DOCTYPE html>
<html>
  <body>
    <h1> Hello </h1>
    <h1 id="num1">TEST</h1>

  <script>
    var myVar = document.getElementById("num1");
    myVar.onclick = function(event){ myFunc(event); };   // Manually working fine
     
    myVar.click();    // Not returning Coordinates 

    function myFunc(e){
      console.log(e);  
    }
  </script>
    
  </body>
</html>

Answer №1

Q1: When the mouse is not within the browser or page window, clicking may result in a position of 0\0. Q2: You can find a solution similar to this to resolve the issue.

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

AngularJS does not run the code inside the ref once directive

Code within the block of this.verifyUserToken does not execute. It appears that the issue may stem from asynchronous calls, as the data returned is not yet available. I am unsure of how to proceed in handling this. this.verifyUserToken = function(){ ...

React Router consistently displaying IndexRoute

This is the main file for my app: import React from 'react'; import { render } from 'react-dom'; import { browserHistory, Router, Route, IndexRoute } from 'react-router'; // Components import Main from './components/cor ...

Is it necessary to match GET and POST routes only if a static file does not match?

I am encountering an issue with my routes and static definitions in Express. Here is my route setup: app.get('/:a/:b/:c', routes.get); Along with this static definition: app.use('/test', express.static(__dirname + '/test')); ...

What is the process for creating a screenshot from HTML content saved as a string?

Can a screenshot be created from a saved HTML code? (particularly, for basic webpages) I am aware of various webkit-based libraries that can generate screenshots, but they typically require a URL. What if the HTML content is already saved or stored in a ...

Unable to retrieve content using the query.ID in Next.js

I'm trying to figure out what is causing the issue in this code, but I can't seem to resolve it. My goal is to use the query.id inside getInitialProps to fetch some content. The fetching process works fine, but when an error occurs, I receive thi ...

Troubleshooting: Issue with Angular 2 bidirectional data binding on two input fields

Hi there, I am encountering an issue with the following code snippet: <input type="radio" value="{{commencementDate.value}}" id="bankCommencementDateSelect" formControlName="bankCommencementDate"> <input #commencementDate id="bankCommencementDat ...

A guide on converting a Javascript datetime to a C# DateTime parameter

In a previous question that I asked on StackOverflow, I mentioned that I was able to retrieve my values successfully as the object was no longer null. The object contains a DateTime property named CreatedOn, which I am sending from JavaScript using new Dat ...

Make sure that a specific script is loaded prior to another script

I'm struggling to understand how scripts are loaded on a page. I have jQuery plugins that rely on other scripts. Specifically, I am using the timeago jQuery plugin. I have loaded these scripts in the head in the following order: <script src="< ...

Animate the transition of the previous element moving downward while simultaneously introducing a new element at the top

I currently have a hidden element called "new element" that is controlled by v-if. My goal is to create a button labeled "display" that, upon clicking, will reveal the new element on top after sliding down an old element. How can I achieve this using CSS ...

Invalid Resize Argument Causes Background to Not Appear on IE Browser

I have encountered a problem where the background (BG) image is not appearing in Internet Explorer (IE). I am struggling to find a solution for this issue. BG Problem Below is the code snippet showing how I implemented the background image. I have used a ...

I am constantly reminded by React hooks to include all dependencies

Imagine I am using useEffect to pre-fetch data upon initial rendering: function myComponent(props) { const { fetchSomething } = props; ... ... useEffect(() => { fetchSomething(); }, []); ... ... } My linter is warni ...

Open the link and input the text into the text box?

Suppose I have the following JavaScript code: <script language="javascript" type="text/javascript"> function addText() { var newText = document.myForm.inputText.value; document.myForm.description.value += newText; } </script> I want t ...

Approach for fetching these JSON records

I am currently exploring ways to retrieve all entries within a JSON payload using JavaScript. Specifically, I am interested in finding the best method to extract all instances of "o4" in a specific order (-159, -257). How can this be achieved? { ...

Executing db.SaveChanges inside a ForEach loop leads to the error message: 'Unable to initiate a new transaction as there are other concurrent threads active within the session'

I recently imported an excel file with approximately 21,000 rows into a temporary table in my database. Now, I need to make some data conversions before transferring them to my main table. However, I encountered an issue when attempting to use SaveChange ...

Creating a dynamic 2D image using HTML5 animation

As a beginner HTML5 developer, I have been exploring ways to create an animated image using multiple jpg files stored in a specific folder on my website. My goal is to design an animation of a rabbit running across the page when a user clicks on a button. ...

Maximum size of data that can be included with output files in a setup project for a Windows Form application developed in Visual Studio, as authorized

Currently, I am developing a Windows Form application using C# and facing an issue with handling 5-10GB of SWF files within the project. Unfortunately, when attempting to build these files along with the project output in the setup project, Visual Studio T ...

jQuery fails to modify HTML according to its intended purpose

I've been struggling to update a price using JQuery. Even though the code seems fine when I check the console, the HTML doesn't reflect the changes. Additionally, when I try to log console.log(newPrc), it gives an error saying "newPrc" is not def ...

Streamline uploading files with AngularJS using Selenium

I am utilizing Powershell to operate .NET Selenium with a FirefoxDriver in order to automate certain tasks. One of these tasks involves file uploads, and the website I am working with appears to have been built using AngularJS. After some experimentation, ...

Rendering text with three.js in the scene

I'm just starting out with three.js. For my project, I need to create a 3D graphical website. After doing some research on Google, I discovered that three.js is a great tool for manipulating WebGL with ease. In the three.js documentation(), TextGe ...

How to retrieve the time duration in minutes between a start and end time in JavaScript to

I have conducted a thorough search on Stack Overflow and other platforms but could not find an answer to my specific question. While I did come across posts related to this topic, they did not address the issue I am facing. Problem: My challenge involves ...