addeventlistener

How to return value from addEventListener

▼魔方 西西 提交于 2021-02-19 01:39:07
问题 I use a javascript to catch the x and y position when user click a link, by now, I can make it works, 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

How to return value from addEventListener

泪湿孤枕 提交于 2021-02-19 01:37:47
问题 I use a javascript to catch the x and y position when user click a link, by now, I can make it works, 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

window.addEventListener on a message emitted from an iframe

不问归期 提交于 2021-02-11 14:02:27
问题 I have two html files. The first is called post.html and it registers an event listener on the window and posts a message to the window: <html> <head> <script> window.addEventListener("message", function(event) { console.log("found event in post!", event) }); window.postMessage({ 'data': ["some data"] },"*"); </script> </head> <body> </body> </html> I have a second html file called listner.html that just listens for a message from the window and loads post.html as an iframe: <html> <head>

JavaScript eventlistener making a character move right on arrow-right key press

两盒软妹~` 提交于 2021-02-11 12:52:43
问题 I have a simple JScript HTML and CSS game in which the character must jump but also move right on pressing the right arrow. I have the jump function working, but on trying to replicate it to create the right-arrow function, it doesn't work. Desired output: To correct the current code such that on pressing the right arrow, the character can also move right, as well as jump. On pressing the right arrow key, the character would keep moving right. On keyup, it would stop (do I have to actually

JavaScript eventlistener making a character move right on arrow-right key press

可紊 提交于 2021-02-11 12:52:23
问题 I have a simple JScript HTML and CSS game in which the character must jump but also move right on pressing the right arrow. I have the jump function working, but on trying to replicate it to create the right-arrow function, it doesn't work. Desired output: To correct the current code such that on pressing the right arrow, the character can also move right, as well as jump. On pressing the right arrow key, the character would keep moving right. On keyup, it would stop (do I have to actually

How can I set an Event type for 'layerX' and 'layerY'

江枫思渺然 提交于 2021-02-10 06:34:09
问题 I'm making a dropdown menu having an absolute position. It gets x, y coordiation from mouse event. container.addEventListener( 'contextmenu', (e: MouseEvent) => { drawingMenuX = e.layerX + 15; // chartiq basic padding is 15 drawingMenuY = e.layerY + 15; }, false, ); But it show error "Property 'layerX' does not exist on type 'MouseEvent'.ts(2339)". How can I set a correct event type instead of MouseEvent? 回答1: As above @Daniel A.White said, it because layerX and layerY are non-standard. The

addEventListener Executing Before Being Clicked

好久不见. 提交于 2021-02-05 11:32:06
问题 I'm Developing a basic Chrome extension centred around a video game. In order to create the menu I have used HTML and come up with: <head> <title>Inheritance Popup</title> <script src="popup.js"></script> </head> <body style="background-color:#4d2b88"> <img src= "start_screen.png" id='startScreenImage' style="z-index: -1;"> <img src= "start_button.png" id='startButtonImage' style="position:absolute; left:65px; top:145px;"> <img src= "info_button.png" id='infoButtonImage' style="position

Triggering submit button with Enter keypress event and mouse click

天涯浪子 提交于 2021-02-05 08:27:29
问题 I am a total beginner and am learning front-end using a "just do it" and project-focus route. My web app will essentially work similar to that of a to-do list. I assume it is because I have "getElementById" twice for the same element. This works initially: // add idea to list button document.getElementById('btnSubmit').addEventListener("submitIdea", submitIdea); function submitIdea() { var ul = document.getElementsByClassName('anIdea')[0]; var enterIdea = document.getElementById('enterIdea');

Triggering submit button with Enter keypress event and mouse click

只愿长相守 提交于 2021-02-05 08:27:26
问题 I am a total beginner and am learning front-end using a "just do it" and project-focus route. My web app will essentially work similar to that of a to-do list. I assume it is because I have "getElementById" twice for the same element. This works initially: // add idea to list button document.getElementById('btnSubmit').addEventListener("submitIdea", submitIdea); function submitIdea() { var ul = document.getElementsByClassName('anIdea')[0]; var enterIdea = document.getElementById('enterIdea');

How exactly are the function calls ordered in an asynchronous JavaScript program?

▼魔方 西西 提交于 2021-02-05 07:49:05
问题 I am learning the concept of asynchronous programming in JavaScript (JS). But, I am having a hard time understanding the same. For the last few days, I had been reading various articles on the internet to understand it, but I am unable to grasp the idea. So, here are the doubts I have: setTimeout(function(){ alert("Hello 1"); }, 3000); // .....(i) console.log("Hi!"); // .....(ii) setTimeout(function(){ alert("Hello 2"); }, 2000); // .....(iii) Consider the above code. I learnt that JS uses a