Trigger the mousemove event only after the mouse click event has been activated

Question

Trigger the mousemove event only after the mouse click event has been activated

I need help with my code. I want an onmousemove event to occur when I click and move the mouse. Can someone assist me please?

        </head>

        <body>
        <img id="myImgId" alt="" src="Chrysanthemum.jpg" width="400" height="300" />

        <script type="text/javascript">
        <!--
        var myImg = document.getElementById("myImgId");
        myImg.onmousemove = GetCoordinates;
        //-->
        </script>


        <p>X:<span id="x"></span></p>
        <p>Y:<span id="y"></span></p>

javascript

Answer 1

Answer №1

To make the onmousemove event work within the click event, you need to update your code as follows:

</head>

    <body>
    <img id="myImgId" alt="" src="Sunflower.jpg" width="400" height="300" onClick="doSomething(this)"/>

    <script type="text/javascript">

  function doSomething(obj)
  {
    obj.onmousemove = function getCoordinates(){
          var x= screen.getX;
          var y = screen.getY;
          }
  }
   </script>


    <p>X:<span id="x-coord"></span></p>
    <p>Y:<span id="y-coord"></span></p>

Answer 2

To make the onmousemove event work within the click event, you need to update your code as follows:

</head>

    <body>
    <img id="myImgId" alt="" src="Sunflower.jpg" width="400" height="300" onClick="doSomething(this)"/>

    <script type="text/javascript">

  function doSomething(obj)
  {
    obj.onmousemove = function getCoordinates(){
          var x= screen.getX;
          var y = screen.getY;
          }
  }
   </script>


    <p>X:<span id="x-coord"></span></p>
    <p>Y:<span id="y-coord"></span></p>

Answer 3

Answer №2

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>My Unique Webpage</title>
</head>

<body>
<img src="iron_man.jpg" style="left:0px;position:absolute;top:50px;"/>
<div id="displayCoordinates" style="top:0px;left:0px;position:absolute;height:40px;width:100px"></div>
<script type="text/javascript">
document.addEventListener('mousemove', trackMouseMovement, false)

function trackMouseMovement(event)
{
    xCoord = event.clientX;
    yCoord = event.clientY;
    document.getElementById('displayCoordinates').innerHTML = "x: " + xCoord + " y: " + yCoord; 
}
</script>
</body>
</html>

Answer 4

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>My Unique Webpage</title>
</head>

<body>
<img src="iron_man.jpg" style="left:0px;position:absolute;top:50px;"/>
<div id="displayCoordinates" style="top:0px;left:0px;position:absolute;height:40px;width:100px"></div>
<script type="text/javascript">
document.addEventListener('mousemove', trackMouseMovement, false)

function trackMouseMovement(event)
{
    xCoord = event.clientX;
    yCoord = event.clientY;
    document.getElementById('displayCoordinates').innerHTML = "x: " + xCoord + " y: " + yCoord; 
}
</script>
</body>
</html>

Trigger the mousemove event only after the mouse click event has been activated

Answer №1

Answer №2

Similar questions

What is the best way to showcase a table below a form containing multiple inputs using JavaScript?

Leverage shared techniques and libraries across two different projects

Issue with toggling in react js on mobile devices

Performing a Javascript validation to ensure that a value falls within

Kurento's WebRTC feature is currently experiencing difficulties with recording functionality

What is the best way to specify a function parameter as the `QUnit` type using TypeScript in conjunction with QUnit?

Unable to bind knockout dropdownlist data during an ajax request

A guide to iterating over an array and displaying individual elements in Vue

Issues with single and double quotation marks in JQuery

What is causing the colorful background to not fully cover my page when I make the window smaller?

Is Optional Chaining supported by Next.js on Vercel?

AngularJS powered edit button for Laravel route parameter

Displaying a picture solely in a designated region

When the state changes, initiate the animation

Angular UI-router allowing links to direct to different sections of the same domain but outside of the app

Attempting to highlight a specific list item by using the CSS current class to emphasize its active state

Issue encountered in React: Unable to access object value within ComponentDidUpdate method

Guide to implementing a variable delay or sleep function in JQuery within a for loop

Can you explain the concept of the "one true source"?

What is the best way to align a TabPanel component at the center using React Material UI