I know that with jquery I can select an element and invoke a click. However, what I am looking to do is simply invoke a click on where ever the current cursor is.
For example something like this:
jQuery().click();
I think this might help:
How to simulate a click by using x,y coordinates in JavaScript?
maybe something like:
$(document).click(function(e) {
var x = e.clientX;
var y = e.clientY;
document.elementFromPoint(x, y).click();
})
Getting the user's mouse position can only be done via an event. Let's say your mouse is broken and it will track, but won't click, you could trigger a 'fake' click at the current position through other means:
var x, y;
$(document).mousemove(function(e) {
x = e.clientX;
y = e.clientY;
})
$(document).keyup(function(e) {
// if the key pressed was return, click at the current cursor position
if (e.keyCode === 13) {
document.elementFromPoint(x, y).click();
}
})
$(document).keyup(function(e) {
// if the key pressed was space, click 50px below the current cursor position
if (e.keyCode === 32) {
document.elementFromPoint(x, y + 50).click();
}
})
tested and working, now you can click with your keyboard!
Note that document.elementFromPoint(x, y) looks for elements at the coordinates relative to the viewport. So you'll be using e.clientX & e.clientY, not e.pageX & e.pageY.
Related
I have taken a codepen reference https://codepen.io/dsalvagni/pen/BLapab to drag a profile image. But it doesn't work in mobile. Getting this error in mobile "[Intervention] Unable to preventDefault inside passive event listener due to target being treated as passive. See ". I tried adding third parameter passive:false. But did not work. Can anyone please help me out. Thanks in advance!
Adding code snippet below that I tried to change so that it works in mobile.
$(window).on("mousemove touchmove", function (e) {
e.preventDefault();
if ($dragging) {
var refresh = false;
clientX = e.clientX;
clientY = e.clientY;
if (e.touches) {
clientX = e.touches[0].clientX;
clientY = e.touches[0].clientY;
}
var dy = clientY - y;
var dx = clientX - x;
dx = Math.min(dx, 0);
dy = Math.min(dy, 0);
/**
* Limit the area to drag horizontally
*/
if (self.model.width + dx >= self.model.cropWidth) {
self.model.x = dx;
refresh = true;
}
if (self.model.height + dy >= self.model.cropHeight) {
self.model.y = dy;
refresh = true;
}
if (refresh) {
render();
}
}
},{ passive: false });
Now I understood your question; to drag profile image. You meant as to pan it around.
So jQuery can't add support to passive listeners. The work around is to use native addEventListener. To support multiple events, I just add array with event names, then use forEach() to run both events.
['mousemove', 'touchmove'].forEach(evt =>
window.addEventListener(evt, function(e) {}, {
passive: false
})
This will remove the error, but then, still one more to change in the code as your reference is in dragStart() function. JQuery modified the original events, and store it in e.originalEvent. if you just use e.touches, there is no such object in e, you have to look inside e.originalEvent
Here is the full example with amendment to your reference code, because SO can't add more than 3000 characters
How can I get a swipe feature instead of having to use buttons on computer/phone.
Here is an example of a next a previous button that should be changed to swiping right or left.
I also would like dots to indicate which track is visible.
I was able to add an onMouseDown event handler that captures the position of the mouse when it is over the <h4> tag and then when the mouse moves (onMouseMove) it determines if the new x coordinates of the mouse are greater than or less than the original x coord. If it's greater, execute the onClickNext() function, proceeding to the next track. If it's less, then it executes onClickPrev(). After the swipe is completed it resets oldX to null thus ending the swiping event check.
onMouseDown() {
this.setState({
oldX: event.clientX
});
}
onMouseMove(){
var newX = event.clientX;
if (this.state.oldX) {
if (newX > this.state.oldX) {
this.onClickNext();
this.setState({ oldX: null });
} else if (newX < this.state.oldX) {
this.onClickPrev();
this.setState({ oldX: null });
}
}
};
Here is the codesandbox with the code.
I need to detect the mouse pressed event in jQuery. I see this question and it's answer. It is the exact one I needed, because here the action is happen only if the mouse is pressed and moved. It is not a click event, it is combined mouse press and move event.
I don't understand how to implement it. Currently I rotate the div using the following code, but this code is based on the mousedown event:
var rotation = 0;
jQuery.fn.rotate = function(degrees) {
$(this).css({'transform' : 'rotate('+ degrees +'deg)'});
};
$('.resizeButton').on("mousedown", function(e) {
var startX = e.pageX;
$(document).mousemove(function(e){
rotation = startX - e.pageX;
$('.test').rotate(rotation);
});
});
$('.resizeButton').on("mouseup", function(){
$(document).unbind( "mousemove" );
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="test">Hello
<button class="resizeButton"> </button>
</div>
Please help to convert it to mouse press and move event, so that the user can easily adjust the rotation by pressing that button and rotate to any direction and release the mouse press. When the user releases the mouse press and then rotation needs to set on that particular mouse press release point.
There are some issues in your code.
First of all, the "mouseup" event handler doesn't get fired because your mouse isn't over the checkbox when you release the mouse. You have to bind the event to the document for example.
Then, instead of binding and unbinding event handlers, it's probably easier to store the state of the mouse, and rotate only if the mouse is pressed.
var rotation = 0;
var rotating = false;
var startX = 0;
jQuery.fn.rotate = function(degrees) {
$(this).css({'transform' : 'rotate('+ degrees +'deg)'});
};
$(document).mousemove(function(e){
if (!rotating) return;
rotation = startX - e.clientX;
$('.test').rotate(rotation);
});
$(document).on("mouseup", function(){
rotating = false;
});
$('.resizeButton').on("mousedown", function(e) {
rotating = true;
startX = e.clientX;
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="test">Hello
<button class="resizeButton"> </button></div>
To have the button follow the mouse pointer during rotation, you would probably need to use some sin and cos functions to determine the angle of rotation, and you'd probably need to adjust the radius too.
This question already has answers here:
How to simulate a click by using x,y coordinates in JavaScript?
(5 answers)
Closed 4 years ago.
How can I trigger mouse left button click by specifying X and Y pixels offset from upper left website corner via JavaScript?
Well, using just Javascript as you asked, you can use mouse events, as you can read X and Y properties to get coordinaties from the event object, for sample:
// mouse move
document.body.onmousemove = function(e) {
var x = e.X;
var y = e.Y;
console.log(e);
}
// mouse down
document.body.onmousedown = function(e) {
var x = e.X;
var y = e.Y;
console.log(e);
}
To simulate an mouse click, you can call the event onmousedown manually, but you have to provide the event parameter (passing the coordinates, etc..), for sample:
document.body.onmousedown({X:120, Y:120 /* other properties */});
bind onclick event on document body, Try this code
document.body.onclick = function(e){
if(e.clientX < 100 && e.clientY < 100){
// your code here
}
alert("X =" + e.clientX +" Y"+ e.clientY)
};
Use jquery mousemove to get the x y coords when moving and then fire the click within it if necessary. Something like:
$("body").mousemove(function( event ) {
if(event.pageX == 50 && event.pageY == 50)
{
$("targetclickelement").click();
}
});
Would be pretty inefficient though...
Edit - without jquery, use the same principle but with the handlers in Felipe Oriani's answer.
I don't believe you can do such a thing, you could however catch the click then check the offsets and call function if it is within range
$('#d').click(function(event){
if(event.offsetX > 50 && event.offsetX < 100 && event.offsetY > 100 && event.offsetY < 200)
{
/// Execute function
}
});
You can fire an element's click event, and you can get an element using x/y co-ordinates - so you could fire a click event on the element at x/y. Since you tagged jQuery:
$(document.elementFromPoint(x, y)).click();
https://developer.mozilla.org/En/DOM:document.elementFromPoint
Solution from How to simulate a click by using x,y coordinates in JavaScript?
I'm creating a Drag and Drop plugin.
Right now i'm trying to create as many as features as possible. My current goal is to get my handle feature to work.
This is the code i'm using:
$(o.handle).mousedown(function (event) {
down = true;
if (o.activeClass === true) {
$(oj).addClass(o.activeClass);
}
var dx = event.clientX - $(o.handle).position().left,
dy = event.clientY - $(o.handle).position().top;
$(o.handle).mousemove(function (event) {
if (down == true) {
if (o.dragClass === true) {
$(oj).addClass(o.dragClass);
}
$(oj).css({
cursor: 'move',
left: event.clientX - dx,
top: event.clientY - dy
});
}
});
});
About the Code. oj is referring to this. this is the element that is being dragged by the handle.
o.handle is referring to the element of the handle. The o in o.handle is referring to:
var o = $.extend(defaults, options);
Problem: The First time I try to click on o.handle. The element jumps to: top:0px;left:0px;. Then it drags fine. But then once I drop it and then pick up the element and try to drag it again. It jumps to: top:0px;left:1px;. This happens over and over, non stop. I don't why though. You can see the problem here. Do you see an error in my code?
Thanks for any help