I found this neat library, robotjs. You can simulate key presses, mouse clicks, and more. I was wondering if it were possible to click the mouse at a specific x,y position on a background window. I'm not specifically looking for a robotjs solution to this. Any other libraries (or native js itself) will work. Any help would be appreciated.
The trigger function can accept an event as a parameter, so you can create you own positioned click:
var event = $.Event('click');
event.clientX = 100;
event.clientY = 50;
$('div').trigger(event);
Related
I display pdf documents in an iframe on my website (all documents are stored in the same domain).
I would like users to be able to click in the document to add comments at a specific location.
To do this, I am looking for a way to get the coordinate inside of an iframe (when we click).
It does not seem possible... However, there are paid solutions that offer this kind of functionality. Example : https://pdfjs.express/demo
So, what process is used?
Thanks for you help.
You can get the coordinate of a click using the onmousedown event. The event gives you a MouseEvent object that contains the x and y coordinate of the click relative to the view port.
To get the coordinate relative to your iframe you have to subtract offsetLeft and offsetTop
Example
var iframe = document.getElementById("iframe")
onmousedown = function(e) {
document.getElementById("position").textContent = "Mouse position: " + (e.clientX - iframe.offsetLeft) + " | " + (e.clientY - iframe.offsetTop)
}
Edit
You could use PDF.js and a canvas instead of a simple iframe to better controll the PDF-viewer.
I am currently making a game that requires the player to drag around an object on a touch screen device.
I've used the event listener mousemove, and it has worked on my Intel XDK emulator, but now that I move it to a touch screen device, I need an touch event that is mousemove and mousedown, and I am not sure how to do that.
Example of ideal code:
canvas.addEventListener("mousemove" && "mousedown", function(e){
pointerX = e.pageX;
pointerY = e.pageY;
}
So this ideal code spits out x and y when the mouse is down, and it has moved.
If anyone knows the legit syntax or a different method of doing this, it would be a great help.
I don't want to incorporate JQuery into this, just pure JS.
Thanks! :)
Edit: Let me rephrase this so it is all straight forward. While the user is dragging an object I need a function that spits out x and y of the pointer the entire drag.
Per MDN:
The EventTarget.addEventListener() method registers the specified listener on the EventTarget it's called on. The event target may be an Element in a document, the Document itself, a Window, or any other object that supports events (such as XMLHttpRequest).
Note the "eventTarget" above. The AddEventListener method takes only one string which represents EventType. You'll need to write a custom function in order to iterate multiple events:
const target = document.getElementById("myDiv");
['mousedown', 'mousemove'].forEach(eventType => {
target.addEventListener(eventType, (event) => {
target.innerText = `x: ${event.pageX} y: ${event.pageY}`;
});
});
#myDiv {
width: 100px;
height: 100px;
background-color: orange;
color: white;
}
<div id="myDiv"></div>
For touch devices, you should be looking into touchstart, touchend, touchcancel and touchmove.
Touch events are similar to mouse events except they support simultaneous touches and at different locations on the touch surface.
https://developer.mozilla.org/en-US/docs/Web/API/Touch_events`
MDN has a great post on touch events. The posts are not just full of quality information but also there are lots of javascript code shown which will provide you with a good resource for touch events.
Interfaces
TouchEvent
Represents an event that occurs when the state of touches on the surface changes.
Touch
Represents a single point of contact between the user and the touch surface.
TouchList
Represents a group of touches; this is used when the user has, for example, multiple fingers on the surface at the same time.
How does this solve my current problem?
The information above provides greater detail for all the types of events you may want to look into. However, for your specific problem, you should look into touchmove & touchend events.
Side note - check touchmove & touchend links for compatibility concerns.
I have the problem, that I need to know if the user actually moved his mouse for real when entering fullscreen, or if it just is a programatically side effect of entering the fullscreen.
Because, when entering fullscreen, the mouse Y coordinates change automatically because the mouse moves upwards on the absolute screen position (since the top navigation of the browser disappears). And since every browser brings a notification in fullscreen mode, this very notification triggers a mousemove event.
So, this makes it very painful to find out, whether the user acually move the mouse, or not.
Is there a solution to identify REAL mouse movement?
$(document).on('mousemove', function(event){
/* gets also triggered when just entering fullscreen,
but without actual movement of the physical mouse..
how can this be identified/ignored?
*/
});
JS Fiddle
What I've tried so far
I tried already relativating the mouse position by using something like window.screen.top - but this seems not to be implemented yet by any browser so far.
I don't think there's anything formally implemented as yet to detect full screen. There's a fullscreenchange as part of the Fullscreen API but it's still experimental and requires vendor-specific prefixes.
So, basically you'll have to get around that limitation with some tricks, like intersecting the resize event and skipping whatever logic you are running on mousemove. Here's an example...
var resizing = false;
$(document).on('mousemove', function(event){
if(resizing == false){
$('p').text(event.pageX + ':' + event.pageY);
console.log("moving");
}
});
$(window).resize(function(){
resizing = true;
setTimeout(function(){
resizing = false;
}, 4000);
});
This example simply defines a flag that determines whether the window is resizing or not, if resizing the onmousemove logic is skipped. Particularly I hate to use setTimeout with an arbitrary time to switch off the resizing flag, but if your requirements are not so strict it can get the job done beautifully
Why don't you incorporate a delay (for example 0.5 seconds) where you ignore all mouse inputs. After the delay, any mouse movements are likely to be from the user...
I solved it now by saving the mouse coordinates, and check if they change - while I force one mousemove event after fullscreen in order to update the coordinates once.
$(document).on('mousemove', function(event){
if(event.pageX == $(this).data('mouseX') && event.pageY == $(this).data('mouseY'))
return;
$(this)
.data('mouseX', event.pageX)
.data('mouseY', event.pageY)
;
});
$(document).mousemove();
is there an easy way to find where user clicked inside an image (div, ...), relative to top-left corner of the element? (using js/jquery)
Basic event.pageX/event.pageY does not take into account scrolling and element position. Combining Document.getScrollTop() and element.getAbsoluteTop ( Mouse click location on an image ) does not look nice at all (may not even work on all browsers as far as I know).
Is there a simpler way to this?
This seems simple enough:
$('#yourImg').click(function(e){
var x = e.pageX - e.target.offsetLeft,
y = e.pageY - e.target.offsetTop;
});
See demo →
I'm displaying some HTML content in my iPhone app using a UIWebView. I have an image link, and I want it to change when the user touches it - at the moment the user puts a finger on the screen, rather than waiting until they lift their finger back off.
What CSS or JavaScript concept could accomplish this? I've looked at the hover and active states in CSS, but they don't seem to be what I'm after: hover relates to touch-up rather than touch-down, while active seems to have no effect at all.
You could try this.
I think it should be what you are looking for!
http://articles.sitepoint.com/article/iphone-development-12-tips/2
8: Touch Events
Of course, you use your iPhone with a
finger instead of a mouse; rather than
clicking, you tap. What’s more, you
can use several fingers to touch and
tap. On the iPhone, mouse events are
replaced by touch events. They are:
touchstart
touchend
touchmove
touchcancel (when the system cancels the touch)
When you subscribe to any of those
events, your event listener will
receive an event object. The event
object has some important properties,
such as:
touches — a collection of touch objects, one for each finger that
touches the screen. The touch objects
have, for example, pageX and pageY
properties containing the coordinates
of the touch within the page.
targetTouches — works like touches, but only registers touches on
a target element as opposed to the
whole page.
The next example is a simple
implementation of drag and drop. Let’s
put a box on a blank page and drag it
around. All you need to do is
subscribe to the touchmove event and
update the position of the box as the
finger moves around, like so:
window.addEventListener('load', function() {
var b = document.getElementById('box'),
xbox = b.offsetWidth / 2, // half the box width
ybox = b.offsetHeight / 2, // half the box height
bstyle = b.style; // cached access to the style object
b.addEventListener('touchmove', function(event) {
event.preventDefault(); // the default behaviour is scrolling
bstyle.left = event.targetTouches[0].pageX - xbox + 'px';
bstyle.top = event.targetTouches[0].pageY - ybox + 'px';
}, false);
}, false);
The touchmove event listener first cancels the default behavior of the finger move—otherwise Safari will scroll the page. The collection event.targetTouches contains a list of data for each finger currently on the target div element.
We only care about one finger, so we use event.targetTouches[0]. Then pageX gives us the X coordinate of the finger. From this value we subtract half the width of the div so that the finger stays in the center of the box.
Hope it helps!
Try the Javascript "onMouseDown", hopefully the mobile Safari will fire the event.
Link