Menu
I use Javascript to catch the x and y position for when user clicks a link.
I can make it work, but I want it to return the two values to function init() when it is called.
How can I do it?
<script type="text/javascript">
document.addEventListener("DOMContentLoaded", init, false);
function init()
{
var canvas = document.getElementById("canvas");
canvas.addEventListener("mousedown", getPosition, false);
// how can I get the return values here?
}
function getPosition(event)
{
var x = new Number();
var y = new Number();
var canvas = document.getElementById("canvas");
if (event.x != undefined && event.y != undefined)
{
x = event.x;
y = event.y;
}
else
{
x = event.clientX + document.body.scrollLeft +
document.documentElement.scrollLeft;
y = event.clientY + document.body.scrollTop +
document.documentElement.scrollTop;
}
x -= canvas.offsetLeft;
y -= canvas.offsetTop;
alert("x: " + x + " y: " + y); // here can print the correct position
// if I add the two values here, and return them. How can I receive the values in funciton init()
// var clickPosition={"x":x, "y":y};
// return clickPosition;
}
</script>
263
The addEventListener() method (when applied to the document object of the JavaScript DOM) attaches an event handler to the document. It has the following syntax with the following parameters. It does not return any value. Some earlier versions of some major browsers do not support this method.
addEventListener('click', () => { console. log('element clicked'); }); The code queries the DOM, grabs a specific element and adds a click event listener to it using addEventListener . addEventListener accepts the event type, a listener callback function and an options or useCapture parameter.
addEventListener can add multiple events to a particular element. onclick can add only a single event to an element. It is basically a property, so gets overwritten.
The JavaScript addEventListener() method allows you to set up functions to be called when a specified event happens, such as when a user clicks a button. This tutorial shows you how you can implement addEventListener() in your code.
If attaching a handler function to an element using addEventListener () , the value of this inside the handler is a reference to the element. It is the same as the value of the currentTarget property of the event argument that is passed to the handler.
The event handler function won't run until the event happens. By that time, the function that called addEventHandler will have finished running and returned. The event handler function needs to either deal with the data itself, or call other functions to do it.
If an EventListener is added to an EventTarget while it is processing an event, that event does not trigger the listener. However, that same listener may be triggered during a later stage of event flow, such as the bubbling phase.
Where you have the comment, you will never be able to access the variables, the event has not occurred yet.
Instead, what you can do is pass an anonymous function to the event handler, call your method which returns a value and use it as appropriate
function init()
{
var canvas = document.getElementById("canvas");
canvas.addEventListener("mousedown", function(event){
var result = getPosition(event);
// result is your return value
}, false);
}
You can't.
JavaScript isn't capable of time travel.
The event handler function won't run until the event happens. By that time, the function that called addEventHandler will have finished running and returned.
The event handler function needs to either deal with the data itself, or call other functions to do it. The data has to travel forwards, it can't go back.
26
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
