We Keep Coding

Double click is being triggered when first click is done in an overlay div

I have an overlay div and a button, below, with a double click event attached. When the overlay is clicked, it is supposed to be hidden. If I double click the overlay, with the mouse over the button, the double click event is triggered in the button. Is this the correct behavior? Am i doing anything wrong? Is there any work around to prevent the triggering on the button?
Code example:
var $container = $('#absolute-container');
var $button = $('#button');
// On container click, hide the container
$container.on('click', function (e) {
e.stopPropagation();
e.preventDefault();
$container.hide();
});
$button.on('dblclick', function () {
alert('double click');
});
Here is a jsfiddle with an example:
https://jsfiddle.net/o0qsbd43/18/
Thanks

You'll need to have a very slight delay on firing off the normal click action, which you cancel when the double click event happens.
ref: https://css-tricks.com/snippets/javascript/bind-different-events-to-click-and-double-click/
var $container = $('#absolute-container');
var $button = $('#button');
function doClickAction(e) {
e.stopPropagation();
e.preventDefault();
$container.hide();
}
function doDoubleClickAction(e) {
e.stopPropagation();
e.preventDefault();
}
var timer = 0;
var delay = 200;
var prevent = false;
$container
.on("click", function(e) {
timer = setTimeout(function() {
if (!prevent) {
doClickAction(e);
}
prevent = false;
}, delay);
})
.on("dblclick", function(e) {
clearTimeout(timer);
prevent = true;
doDoubleClickAction(e);
});
$button.on('dblclick', function () {
alert('double click');
});
.absolute-container {
background: black;
opacity: 0.5;
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="absolute-container" class="absolute-container" ></div>
<div>
<button id="button">Double Click Button</button>
</div>

I think on click and double click events event is fired when you release the bouse button. Double click is a single event that calculates time between clicks.
In your case you release button on single click but for firing double click browser is still waiting if there will be second click and release of the button within a second or so depending on OS configuration.
So in your case second click release occurs on top of the button and double click event is fired.
Solution I could propose is to make a delay when hiding your overlay layer. For example if you will make 1 second timeout and during this timeout make a fadeout effect or something like this, the time interval the browser is waiting for the second click to fire double click even will expire and you can do your double click on the button. Note sure I explained correctly and intuitively.

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);

How to restart event mousemove jquery?

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

setInterval cannot clear with mouseup

I am using mousedown and mouseup to trigger a setInterval function like so:
$("#rotateRight").mousedown(function() {
intervalIRight = setInterval(rotateRight, 0);
}).mouseup(function() {
clearInterval(intervalIRight);
});
This works great, however, if I release the mouse (mouseup) when I am not hovering over $("#rotateRight") then there is technically no 'mouseup' so the interval goes on forever and is never cleared.
I cannot use hover because I want the even to be when a user clicks and holds a mouse. But at the same time, I need to fix this 'mouseup bug.' Any ideas?
UPDATE: New code is as follows, but still does not clear interval because mouseup happens on an iframe, not the DOM.
var intervalIRight;
var intervalILeft;
$("#rotateRight").on('mousedown', function() {
intervalIRight = setInterval(rotateRight, 0);
});
$("#rotateLeft").on('mousedown', function() {
intervalILeft = setInterval(rotateLeft, 0);
});
$(document).on('mouseup', function() {
clearInterval(intervalIRight);
clearInterval(intervalILeft);
});

clear the interval on any mouseup by attaching the event handler to the document.
var intervalIRight;
$("#rotateRight").on('mousedown', function() {
intervalIRight = setInterval(rotateRight, 0);
});
$(document).on('mouseup', function() {
clearInterval(intervalIRight);
});
FIDDLE

Make div open with your mouse and not click

I have make this: This In the right you see a red button. When you click on the red button. The content screen with the text is coming. But i have a question of this. Can i make this with a other animation. If you hold your mouse. Then you can slide open. With your mouse button to left. Then the content box open. Do you understand it? I hope you can help me.
You can see the code on jsfiddle. And you can change it there. I hope you can help me. I am a starting javascripter. And how And have no idea how I can make this.

To implement dragging, you can make use of mousedown/mouseup/mousemove like this: http://jsfiddle.net/pimvdb/25y4K/8/.
$(function () {
"use strict";
var box = $(".what-is-delicious"),
button = $(".what-is-delicious > a");
var mouseDown = false,
grabbed = 0,
start = -303;
button.mousedown(function(e) {
mouseDown = true;
$('*').bind('selectstart', false); // prevent selections when dragging
grabbed = e.pageX; // save where you grabbed
$("body").append('<div class="background-overlay"></div>');
});
$('body').mouseup(function() {
mouseDown = false;
$('*').unbind('selectstart', false); // allow selections again
$(".background-overlay").remove();
start = parseInt(box.css('right'), 10); // save start for next time
// (parseInt to remove 'px')
}).mousemove(function (e) {
if(mouseDown) { // only if you are dragging
// set right to grabbed - pageX (difference) + start 'right' when started
// dragging. And if you drag too far, set it to 0.
box.css("right", Math.min(grabbed - e.pageX + start, 0));
}
});
});

Here is an updated fiddle. Basically I just did a couple of things:
Changed the handler from "click" to "mouseenter"
Added a "mouseleave" handler that does the opposite thing
Put the handlers on the "what-is-delicious" container instead of the <a>
The code:
$(function () {
"use strict"
var box = $(".what-is-delicious"),
button = $(".what-is-delicious > a");
box.mouseenter(function (e) {
e.preventDefault();
if ($(button).hasClass("open")) {
} else {
$("body").append('<div class="background-overlay"></div>');
button.addClass("open");
box.animate({ right: "0"}, 750);
}
}).mouseleave(function (e) {
e.preventDefault();
if ($(button).hasClass("open")) {
$("body").find('div.background-overlay').remove();
button.removeClass("open");
box.animate({ right: -303}, 750);
} else {
}
});
});
The "preventDefault()" calls aren't really necessary anymore but I left them there.

I would assume you are toggling the Style.Display of the DIV currently in an OnClick() event.
The same code can be called from a Hover() or MouseOver()