How to restart event mousemove jquery? - javascript

I have to move a div by clicking on it, clicking again I must stop the div in that position. Now the problem is: when I want to move again the div, does not activate the mousemove event ... how can I fix it?
$('.move_div').live('click', function() {
$('html').on('mousemove', function(e) {
var x = e.pageX - this.offsetLeft;
var y = e.pageY - this.offsetTop;
$('div').css({'top': y, 'left': x});
});
$("html").live('click', function() {
$('html').off('mousemove');
});
});

var ele = '.move_adv';
var moveBool = false;
$(function () {
$('html').on('mousemove', function (e) {
console.log($(this).width());
if (moveBool == true) {
var x = e.pageX - $(ele).width()/2;
var y = e.pageY - $(ele).height()/2;
$(ele).css({
'top': y,
'left': x
});
}
});
});
$(ele).live('click', function () {
moveBool = !moveBool;
});
http://jsfiddle.net/6y24s/2/
The main logic is storing the 'moveability' state of the div in a boolean.
You would also like to refine the code more.

Fiddle here , if you want to keep your code then only thing you need to add is
event.stopPropagation();

When you click on the div the mousemove handler is added to the div. Then an event handler is added to the document that removes any mousemove event handlers.
You then move the mouse and the div follows, you click and the mousemove handler is deleted.
You click on the div again, a mousemove event handler is added, though then the click event handler from the document takes away the mousemove handler.
So whenever you click after the first two clicks the mousemove handler is simultaneously created and destroyed.
Also use .on() instead of .live()
.live() was deprecated in JQuery 1.7

Related

keep resizing element while mouse button is down

how to keep resizing an element continiously while mouse button is down?
I tried with mousedown - without success.
$('button').on('mousedown', function(){
let targ = $('.targ');
let x = targ.height();
x++;
targ.height(x);
});
.targ{background:orange;}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button>PRESS</button>
<br><br>
<div class='targ'>LOREM</div>
you can add an setInterval() to your mousedown event, and clear it on mouseup
here are an working example of setting it to 50 milliseconds:
var interval;
$('button').on({
mousedown: function() {
interval = setInterval(function() {
let targ = $('.targ');
let x = targ.height();
x++;
targ.height(x);
}, 50);
},
mouseup: function() {
window.clearInterval(interval);
}
});
Working fiddle also here: https://jsfiddle.net/qytd5h1n/2/
hope it helps :)
You could keep track of 3 events, 'enabling' the resize function when the mouse is clicked (click), and disabling the resize function with mouseup or mouseleave. Use setInterval to both check whether the mouse click was released or moved out of the element, assigning it (the timeout) to a variable so you can abort it on both of the other events (mouseup and mouseleave)

mousedown event not happening

in the snippet below, only the 'mousemove' event is working. 'mousedown' has no effect and I'm not able to decipher why this is happening. If I replace 'mousedown' with 'click', it does work, however I want to use mousedown so the fadeOut event happens immediately (at the start of a click, rather than using click which relies on the users mouse going down and then back up.
$('.issue-carousel').on({
// On mousemove, controls follow cursor
mousemove: function(e) {
var parentOffset = $(this).offset();
var relX = e.pageX - parentOffset.left;
var relY = e.pageY - parentOffset.top;
$('.drag-indicator').css({
left: relX,
top: relY
});
},
mousedown: function() {
$('.drag-indicator').fadeOut(300);
}
});
As per my comment, your code works fine - with one exception. The mousedown fadeout doesn't work because you technically aren't clicking the carousel but instead the drag indicator. I've updated the code as per below where I have changed the mousedown target accordingly;
$('.issue-carousel').on({
// On mousemove, controls follow cursor
mousemove: function(e) {
var parentOffset = $(this).offset();
var relX = e.pageX - parentOffset.left;
var relY = e.pageY - parentOffset.top;
$('.drag-indicator').css({
left: relX,
top: relY
});
}
});
$('.drag-indicator').on({
mousedown: function(e){
$(this).fadeOut(300);
}
})
A working fiddle can be found here: https://jsfiddle.net/o3cdLjp7/2/

Creating an event that triggers a second event

I'm trying to create a jQuery event that triggers a second event. The first event is clicking on the emoji id which refers to an image. The second is a mousemove event which moves the image around the page. The third event stops this event when the mouse click happens again anywhere in the body of the page and places the image at that absolute position. I was able to get the second and the third events to work but I can't get the first event to work with the second. Here is what I have so far for my jQuery:
var mouseTracker = function(event) {
console.log(event.pageX, event.pageY, !!event.which)
$('#emoji').css('top', event.pageY);
$('#emoji').css('bottom', event.pageY);
$('#emoji').css('left', event.pageX);
$('#emoji').css('right', event.pageX);
}
var begin = function() {
$('body').on('mousemove', mouseTracker);
$('body').css('cursor', 'none');
}
var stop = function() {
$('body').off('mousemove', mouseTracker);
$('#emoji').css('postion', 'absolute')
$('body').css('cursor', 'default');
}
$('#emoji').on('click', begin);
$('body').on('click', stop);`
Initialize the event from within the first event call.
$('#emoji').on('click', function() {
begin();
$('body').on('click', stop);
});
During the click on #emoji the body click even is also triggered.
That leads to calling stop(). The propagation of that event to body can be blocked by event.stopPropagation() (or equivalent return false from begin()). The propagation should be manually stopped even if body on click handler is attached in begin().
You may want one-time usage of some events. That can be done by binding using .one(). In that case the handler is detached after the first usage without manual .off():
var begin = function (event) {
$('body').on('mousemove', mouseTracker);
$('body').one('click', stop);
$('body').css('cursor', 'none');
return false; // event.stopPropagation();
}
var stop = function () {
$('#emoji').one('click', begin);
$('body').off('mousemove', mouseTracker);
$('#emoji').css('postion', 'absolute')
$('body').css('cursor', 'default');
}
$('#emoji').one('click', begin);

.mouseup() and .mousedown() not working with .mousemove()

For some reason, my .mouseup() event is not being called. Ideally I'd like to console.log when the user activates mouseup().
Would anyone know what is wrong?
http://jsfiddle.net/cBh3B/
$('.circle').mousedown(function () {
console.log('mousedone');
$(document).mousemove(function (e) {
console.log(e.pageY);
$('.circle').offset({
left: e.pageX,
top: e.pageY
});
});
});
$('.circle').mouseup(function () {
console.log('up');
});
var p = $('.square').position();
console.log(p.left);
You are moving the circle away from the cursor once the mousedown event is triggered. By the time the mouse button is moved up, the cursor is no longer over the circle, which means that the $('.circle').mouseup event will not be called.
If you keep the circle under the mouse then the mouseup event will be captured. (See this jsFiddle demo.)
EDIT: If your element is actually a 'circle' then your problem will most likely be the one evoked by #Peter Olson.
I recommend you try using
$('.example').on('mouseup', function(){ console.log('mouseup'); });
Here is an example: http://jsfiddle.net/Grimbode/qsE56/
Seems this way your events are being called.
$('.circle').on('mousedown',function () {
console.log('mousedone');
$(document).on('mousemove', function (e) {
console.log(e.pageY);
$('.circle').offset({
left: e.pageX,
top: e.pageY
});
});
});
$('.circle').on('mouseup', function () {
console.log('up');
});
var p = $('.square').position();
console.log(p.left);
You can also check the log, there is a clear 'up' written on it.

jQuery mouseenter and mouseleave events fire out of control

I'm using this piece of code to populate a div with the contents of a hovered element.
$('.gallery .thumbs a').hover(
function(){
var target = $(this);
$('.hover-box').html(target.clone());
var top = target.offset().top;
var left = target.offset().left;
$('.hover-box').css({'display':'block', 'top':top, 'left':left});
},
function(){
$('.hover-box').hide();
}
);
The problem is - what many seem to have had - that after adding the 'mouseleave' handler both the events start firing uncontrollably.
I know the bubbling issues related with mouseover/out but this seems to behave the same.
Anyone have an idea why this is happening?
EDIT:
Here's the deal on fiddle. Not the prettiest sight but function the same as my problem.
FIDDLE
It's because your function fires and re-fires each hover and at the end of each hover, so any time you move the mouse it fires twice. What you want to do instead is fire it on mouseenter of .thumbs a and mouseleave of .hover-box, like this
jQuery(function () {
jQuery('.thumbs a').hover(
function () {
var target = $(this);
jQuery('.hover-box').html(target.clone());
var top = target.offset().top;
var left = target.offset().left;
jQuery('.hover-box').css({
'display': 'block',
'top': top,
'left': left
});
});
$('.hover-box').mouseleave(function() {
$('.hover-box').hide();
});
});

Categories