When I'm select text and start to drag selections, mouse event like a wheel or mousemove doesn't fire. How I can catch an event while dragging?
I create a test example to check this issue, you can see it here:
https://jsfiddle.net/prevolley/3q7xwa8p/4/
<p>dasdasdasdas</p>
document.addEventListener('wheel', (event) => {
console.log('wheel', event.deltaY);
});
document.addEventListener('mousemove', (event) => {
console.log('mousemove', event.pageX);
});
I want to catch a mouse event while I drag selected text.
An image where I show the problem:
you can use event drag:
document.addEventListener('drag', (event) => {
console.log('drag', event.pageX);
});
Text
Related
Hi is there a way to prevent jquery from detecting a click event when you drag and release outside of an input field?
The thing is I have a modal window that closes when you click outside of the window (the backdrop).
When you have an input field in the modal window and you select the text inside the input and drag your mouse all the way out of the modal window area, then release the click, the modal will close since it detects a click event on that element when it actually wasn't a click event but a "release" event.
Here is an example https://jsfiddle.net/imurphy/tafwzero/1/
Click event code:
$('.how').on('click',function(e){
e.preventDefault();
if(!$(e.target).is('.how')){
return;
}
alert('Modal Closed');
});
Thank you
Check below code.You need use mousedown and mouseup handle the drag and drop
var isDragging = false;
$(".how")
.mousedown(function() {
$(window).mousemove(function() {
isDragging = true;
$(window).unbind("mousemove");
});
})
.mouseup(function() {
var wasDragging = isDragging;
isDragging = false;
$(window).unbind("mousemove");
if (!wasDragging) {
$(this).selection();
}
});
$('.how').on('click',function(e){
e.preventDefault();
if(!$(e.target).is('.how')){
return;
}
alert('Modal Closed');
});
As title says, I noticed that on my canvas mousemove is fired when mouse buttons are pressed/released even though I'm not actually moving the mouse. The problem is that, in the case of releasing the button, it gets fired AFTER mouseup!
Is that normal behaviour?
How to fix/workaround? I really need my mouseup to fire last, or mousemove not to fire at all when releasing buttons; setTimeout is not a legit solution.
Sample: https://jsfiddle.net/h40mm4mj/1/ As simple as that: if you open console and click in the canvas, you'll notice mousemove is logged after mouseup
canvas.addEventListener("mousemove", function (e) {
console.log("mousemove");
}, false);
canvas.addEventListener("mouseup", function (e) {
console.log("mouseup");
}, false);
EDIT: Just tested, it only happens on Chromium, Windows.
I´ve was having the same issue. Solve comparing the previus mouse position with new mouse position :
function onMouseDown (e) {
mouseDown = { x: e.clientX, y: e.clientY };
console.log("click");
}
function onMouseMove (e) {
//To check that did mouse really move or not
if ( e.clientX !== mouseDown.x || e.clientY !== mouseDown.y) {
console.log("move");
}
}
Taken from here : What to do if "mousemove" and "click" events fire simultaneously?
I want to control events when hovering a <div> element.
I have my code pretty much working, but I have 2 remaining problems!
When I first run the code in my JSFiddle, I need to click on the body of the document first to get the keydown to be recognised. If I run the code and hover right away and press shift nothing happens. I have it running on doc ready,so not sure why I need to click first? Anyway to get this to work right way without needing to click?
I trace out in the console the console.log('click and press'); This is getting fired each time I press shift and is not looking for a click - why is this getting fired when pressing shift when I call it within a function that says $(document).on('keydown click', function (e) {
DEMO
My JS code is as follows
$(document).ready(function () {
$(".target").hover(function () {
$(document).on('keydown click', function (e) {
if (e.shiftKey) {
// code to go here for click
console.log('click and press');
}
});
$(document).on('keydown', function (e) {
if (e.shiftKey) {
// change cursor to ne-resize
$('.target').css('cursor', 'ne-resize', 'important');
}
});
$(document).on('keyup', function (e) {
// change cursor to sw-resize
$('.target').css('cursor', 'sw-resize', 'important');
});
});
});
Thanks
Your event binding is incorrect. you can use:
Demo: http://jsfiddle.net/g9ea8/8/
Code:
$(document).ready(function () {
var hovering = false;
$(".target").hover(function () {
hovering = true;
}, function() {
hovering = false;
});
$(document).on('click', function (e) {
if (hovering && e.shiftKey) {
// code to go here for click
console.log('hovering+shift+click');
}
});
$(document).on('keydown', function (e) {
if (hovering && e.shiftKey) {
// change cursor to ne-resize
$('.target').css('cursor', 'ne-resize', 'important');
console.log('hovering+shift');
}
});
$(document).on('keyup', function (e) {
// change cursor to sw-resize
if(hovering) {
$('.target').css('cursor', 'sw-resize', 'important');
console.log('hovering+keyup');
}
});
});
The reason why you need to click first on the fiddle demo is because the frame doesn't have focus, normally this should work fine.
You shouldn't be attaching a keydown listener, you only need a to attach click, otherwise keydown will fire the event regardless of a click occurring.
Also, currently you're attaching 3 handlers every time you hover over .target, see #techfoobar's answer for a cleaner solution.
I am trying to drag over an image and in order to stop the browser's default image drag, I am using event.preventDefault(). But for some reason it is interrupting further events like dragenter, dragover, dragend etc from executing. Why is this and How can I stop browser's default function without interrupting normal drag events.
<img src="/img/image1" id="img1"/>
jQuery
var obj=$('#ironman');
obj.on('dragstart', function (e) {
//e.preventDefault();
console.log("dragstart");
});
obj.on('dragenter', function (e) {
console.log("dragenter");
});
obj.on('dragover', function () {
console.log("dragover");
});
obj.on('dragleave', function () {
console.log("dragleave");
});
obj.on('dragend', function () {
console.log("dragend");
});
JSfiddle
This is a tough one as you are stopping native drag chain event on the element. Not sure why you want to do this, but one way to implement the native dragging is to cancel it and deal with mouse events
var obj=$('#ironman');
obj.on('mousedown', function (e) {
console.log("mousedown");
// bind to the mousemove event
obj.on('mousemove', function (e) {
console.log("mousemove");
});
});
obj.on('mouseup', function (e) {
console.log("mouseup");
// unbind the mousemove event
obj.unbind('mousemove');
});
obj.on('dragstart', function (e) {
e.preventDefault(); // cancel the native drag event chain
console.log("dragstart");
});
How to trigger an action when focusing an input but the focus event not come from click?
$('#input').focus(function(){
if(not come from click)
{
alert('Holla!');
}
});
To tell between "focus" events that come from keyboard and those that come from mouse, you can track the mouse events.
First, to understand the sequence of events that happen when you click an input, or Tab into it, look at the following jsfiddle: http://jsfiddle.net/orlenko/fyFkk/
In it, we'll log mousedown, mouseup, click, focus, and blur events.\
<input type="text" id="zero"/>
<input type="text" id="one"/>
JavaScript:
$(function() {
var one = $('#one');
one.mousedown(function() {
console.log('mousedown');
});
one.mouseup(function() {
console.log('mouseup');
});
one.click(function() {
console.log('click');
});
one.focus(function() {
console.log('focus');
});
one.blur(function() {
console.log('blur');
});
});
If we simply click on the input, and then on another control, we'll get the following:
mousedown
focus
mouseup
click
blur
But if we tab into and out of the input, we'll see in the console:
focus
blur
So, if we keep track of mousedown and blur events, we can tell between a keyboard-based focus and a mouse-based one. For example:
$(function() {
var one = $('#one');
one.mousedown(function() {
console.log('mousedown');
$(this).data('mousedown', true);
});
one.mouseup(function() {
console.log('mouseup');
});
one.click(function() {
console.log('click');
});
one.focus(function() {
if ($(this).data('mousedown')) {
console.log('You clicked it!');
} else {
console.log('You tabbed it!');
}
});
one.blur(function() {
console.log('blur');
$(this).data('mousedown', false);
});
});
A fiddle with this example: http://jsfiddle.net/orlenko/cwRAw/
Use keyup
$('#input').keyup(function(){
alert('Called only when the focus is on element through keypress');
});
function ren(){
alert('Holla!');
}
$('input').focus(ren);
$('input').mousedown(function(){
$('input').off('focus',ren);
});
$('input').mouseup(function(){
$('input').on('focus',ren);
});
Don't check in focus function instead remove the focus function when making a click
Demonstration