I'm creating iFrame and in that iFrame script I need to catch mouse coordinates after creation (in very start). I was hoping that it's possible with custom event.
I tried
var myEvent = new Event('mouseC');
document.addEventListener('mouseC', function(e){
console.log('my event is working');
console.log('mouse x is '+e.pageX);
console.log('mouse y is '+e.pageY);
});
document.dispatchEvent(myEvent);
console is displaying 'my event is working', but mouse coordinates are undefined.
I tried wrapping it in window.onload, and I also tried screenX and clientX... always undefined
How can I catch mouse coordinates in newly created iFrame imedietly after creation?
...btw, mousemove event is working and writing coordinates when mouse is moved over new iFrame.
Could I somehow move mouse for just 1px to trigger that event?
iframElement = document.getElementBy...("...");
document.addEventListener("click", function(evt,iframElement){
var x = evt.pageX - iframElement.offset.left;
var y = evt.pageY - iframElement.offset.top;
console.log(x+" , "+y);
});
it might work
var value =parent.frames[FRAME_NAME].frameElement.offsetParent;
var x = 0, y = 0;
while (value)
{
x += value .offsetLeft;
y += value .offsetTop;
value = value .offsetParent;
//console x anf y...
}
console x and y you can get co ordinates of mouse inside iframe.
Related
how do I get the x,y coordinates from a HTML element relative to screen?
I'm using x,y from getBoundingClientRect() as below, but as you can see in the blow image, if I use move the cursor to this x,y position, the curson is in the middle between 0 and + buttons not the 5 button, which is the target button.
What am I missing?
JS code:
var e = document.querySelector('input[id=five]');"
var r = e.getBoundingClientRect();
var x = r.x;
var y = r.y;
MoveMouseTo(x,y); // imaginary call, the real cursor move is done by C# but I can share the code, as needed.
Image:
NOTE: if this aditional info may help, it's a C# application with embedded browser.
const getCoords = (e) => {
var x = e.clientX
var y = e.clientY
var xx = e.screenX
var yy = e.screenY
console.log(x, y, "client")
console.log(xx, yy, "screen")
}
You're going to want to assign this function to a onmousemove event to the outermost div containing the UI for your calculator. This should at least show you the difference between a screen X,Y and a client X,Y
https://www.w3schools.com/code/tryit.asp?filename=FVXZOK1SPTR0
You can try to add an event listener on your element and use the event to retrieve the coordinates of the mouse.
const $element = document.querySelector('input[id=five]');
$element.addEventListener('mousemove', handleMouseMove);
function handleMouseMove (event) {
console.log('Offset from the screen coordinates', event.screenX, event.screenY);
// The client refers to the element you are bound to;
console.log('Offset from the client coordinates', event.clientX, event.clientY);
};
I'm trying to get the coordinates of the mouse click on the amcharts pie-chart's slice. It is working for the whole page except the slices. event.pageX and event.clientX are not working, returning undefined. I want the coordinates with respect to the page.
{
"event": "pullOutSlice",
"method": function (event) {
var relX = event.pageX;
var relY = event.pageY;
}
}
JSFIDDLE
Is this what you are looking for ?
https://jsfiddle.net/6w78zmo9/1/
Try this:
var relX = event.chart.mouseX;
var relY = event.chart.mouseY;
I created a a-scene with some objects to drag. The final purpose is exactly what aframe-click-drag-component does. Unfortunately, this component is not compatible with the last version of A-Frame.
I created a custom component.
AFRAME.registerComponent('draggable', {
init: function () {
/* Some code */
}
});
I use the aframe-mouse-cursor-component to be able to get the mouseenter and mouseleave events on the draggable object, and detect when the mouse position allows the user to select the object.
I added an EventListener on document.body to know when the dragging starts:
document.body.addEventListener('mousedown', function (e) {
// start dragging
});
I continuously update a global variable to update the mouse position when a mousemove occurs:
document.addEventListener('DOMContentLoaded', function () {
document.body.addEventListener('mousemove', function (e) {
window.mouseX = e.clientX;
window.mouseY = e.clientY;
});
});
This way, I can easily get the position of the mouse during the dragging. But I do not know how to convert the position of the mouse on the client to a position in the Virtual Reality (restricted to a 2D plan to make it possible).
I solved this issue by using the raycaster coming from the cursor in the middle of the a-camera, but I want to drag the objects with the mouse-cursor, and this component does not have a raycaster.
I also tried to use some maths to convert the mouse coordinates to a coordinates set relative to the camera, without success (essentially because of the screen size which can vary).
What solutions are available? I would like to update the click-drag or the mouse-cursor, but I have no knowledge of THREE.js.
See https://github.com/mayognaise/aframe-mouse-cursor-component or https://github.com/mrdoob/three.js/blob/dev/examples/js/controls/DragControls.js or https://www.npmjs.com/package/aframe-click-drag-component for examples
The main chunk of code is like:
canvas.addEventListener( 'mousemove', function () {
var mouse = new THREE.Vector2();
var rect = canvas.getBoundingClientRect();
mouse.x = ( (event.clientX - rect.left) / rect.width ) * 2 - 1;
mouse.y = - ( (event.clientY - rect.top) / rect.height ) * 2 + 1;
raycaster.setFromCamera( mouse, camera );
}, false);
I have a "ship" that I have drawn on my canvas and I want to be able to drag it left and right on the bottom of the canvas when it is clicked. I have done some research but I'm having no luck.
I'm assuming I use onMouseDown to do this so I have this when the page loads...
canGame.onMouseDown = canCanvas.onMouseDown(e);
and here is the code that creates my ship
gShip = spriteNew("MediumSpringGreen", 230, 950, 150, 20);
From there I am not really sure what to do. I have a gameUpdate function which moves the invaders down the screen. A gameInit function that will draw the invaders and ship on the screen. Also I have a gameDraw function which draws everything on the screen. I have a few others which are not really important for my issue.
Here is the jsfiddle with the full source code. For some reason though it will run on my browser when I run the HTM file but not in jsfiddle.
http://jsfiddle.net/f66bk/2/
Like I said in comment, the best way of doing this kind of behaviour is by using the events mouseup, mousedown and mousemove.
I defined a var named isMouseDown to know that the ship is dragged that I set to true on mousedown and false on mouseup:
canGame.onMouseDown = function() { isMouseDown = true }
canGame.onMouseUp = function() { isMouseDown = false }
You will also need the event onmousemove to get your mouse position to redraw your ship properly:
canGame.onMouseUp = function(event) { moveShip(event, this) }
In the function moveShip, you can get your mouse position and set the position of your ship properly:
function moveShip(evt, obj) {
if(!isMouseDown)
return;
var target = evt.target || evt.srcElement,
rect = target.getBoundingClientRect(),
offsetX = evt.clientX - rect.left;
gShip.Rect.X = offsetX - gShip.Rect.Width/2;
}
Here is your jsfiddle :)
function aim() {
var mousex = ?
}
<div class="gameArea" onmousemove="aim();"> </div>
I can't find how to get the mouse coordinates for an onmousemove event in javascript.
var guide = null;
function aim(event) {
if(window.event)
event = window.event; //grrr IE
var mousex = event.clientX - guide.offsetLeft;
alert('mouse x' + mousex)
}
function init() {
guide = document.getElementById("guide")
guide.onmousemove = aim;
}
<body onload="init();">
This appears to work on both browsers. I cant do onmousemove="aim();" in html because it doesn't pass the mousemove event object.
The above example using guide.offsetLeft only works if the enclosing element is at (0,0). If not, you can use guide.getBoundingClientRect().left (and similar for vertical coord)
Take a lot at the following script. I believe it should be exactly what you're looking for.
Capture Mouse Position