I've created a fiddle with some basic code, please advise on resize functionality, core Javascript ninjas and gurus
http://jsfiddle.net/developer11/ZGTL3/
<div id="bars">
<ul id="bars_3">
<li id="bars_3_0"><a id="resizer" href="javascript:;"></a></li>
</ul>
</div>
JavaScript is
document.getElementById("bars_3_0").firstChild.addEventListener("mousedown", function() {
event.preventDefault();
document.addEventListener("mousemove", mousemoveHandler);
}, false);
document.addEventListener("mouseup", function() {
document.removeEventListener("mousemove", mousemoveHandler);
});
function mousemoveHandler() {
console.log('move');
}
You could try setting a flag to true on mousedown and set it to false on mouseup. Then on mousemove you can change the hight or position of your element to match the current mouse position.
In your mousemove listener you can check your mousedown flag to see if you should update the position or not.
This page might help you get started.
document.getElementById("bars_3_0").firstChild.onmousedown = function() {
console.log('down');
};
Hope this solves your problem in the fiddler code.
document.getElementById("bars_3_0").firstChild.onmousedown=function() {
document.onmousemove=mousemoveHandler
};
document.onmouseup=function() {
document.onmousemove='';
};
function mousemoveHandler() {
console.log('move');
}
Related
I'd like to record all event.target that mouse encounters after user clicks anywhere and stop recording after he releases click. So far I've come up with this which doesn't stop recording after mouseup and I don't know why.
document.addEventListener('click', function() {
document.addEventListener('mouseover', record);
document.addEventListener('mouseup', removeListener);
})
function record(e) {
console.log(e.target);
}
function removeListener() {
document.removeEventListener('mouseover', record);
document.removeEventListener('mouseup', removeListener);
}
<div class='toto'>Toto</div>
<div class='toto'>Toto</div>
<div class='toto'>Toto</div>
<div class='toto'>Toto</div>
EDIT : Answer & Explanation
addEventListener('click') triggers on mouseup, therefore the sequence was as follow :
document.addEventListener('click', function() {
//Following would start once mouseup
document.addEventListener('mouseover', record);
//Following never triggers cause mouse is already up
document.addEventListener('mouseup', removeListener);
})
Solution as stated in the answer is to replace 'click' with 'mousedown'. It triggers immediatly after mouse is click is pressed, not released :
document.addEventListener('mousedown', function() {
document.addEventListener('mouseover', record);
document.addEventListener('mouseup', removeListener);
})
Instead of click event, you should use mousedown
I forked your codepen and you can see the result: https://codepen.io/Lazzaro83/pen/EeoxEW
document.addEventListener('mousedown', function() {
document.addEventListener('mouseover', record);
document.addEventListener('mouseup', removeListener);
})
Your problem is because you are putting one listener inside another, this isn't a reliable way to do so because terms of ms of execution, remember JS is not that "sequential" do not worry and let the three listener to live, a better way of do the thing you want to is make a global variable that works like a switch :
let switch = false;
document.addEventListener('click', function(e) {
e.stopPropagation();
switch = true;
});
document.addEventListener('mouseover', function(e){
e.stopPropagation();
if (switch){
console.log(e.target);
}
});
document.addEventListener('mouseup', function(e){
e.stopPropagation();
switch = false;
}) ;
this is a project i did with a blackboard, have many techniques as relegation:
https://codepen.io/LeonAGA/pen/eyWpMV
regards!
My Problem is this:
I have a MouseWheel Event (from plugin: https://github.com/brandonaaron/jquery-mousewheel) that triggers a function:
$(document).on('mousewheel', onMouseWheel);
function onMouseWheel(event,delta)
{ Code... }
I Also have a Scroll Event that triggers another function:
$(document).on('scroll', onScroll);
function onScroll()
{ Code... }
However when using the mouswheel, both events are triggered and so both functions run, which I don't want them to. They have to be separate since using the mousewheel and dragging the scrollbar should give separate results. The problem only occurs that way around ie. the mousewheel function is not triggered by dragging the scrollbar.
EDIT:
I've realized with a little help, that the problem occurs because I use ScrollLeft() inside my mousewheel function, which of course causes the scroll event.
I've tried to think of a solution but with no luck. Can anyone help? Thanks!
EDIT: More code:
$(document).on('scroll', onScroll );
function onScroll()
{
code...
}
$(document).on('mousewheel', onMouseWheel ) );
function onMouseWheel(event,delta)
{
event.preventDefault();
if(delta<0)
{
detectDown();
}
else if(delta>0)
{
detectUp();
}
return false;
}
$(document).on("keydown", onKeyDown);
function onKeyDown(e)
{
event.preventDefault();
if (e.keyCode == 37)
{
detectUp();
}
else if (e.keyCode == 39)
{
detectDown();
}
}
function detectUp()
{
$("html, body").animate({scrollLeft:(currentElement.prev().position().left - 100)}, 800, 'easeOutQuad');
currentElement = currentElement.prev();
}
function detectDown()
{
$("html, body").animate({scrollLeft:(currentElement.next().position().left - 100)}, 800, 'easeOutQuad');
}
Maybe this helps?
Add return false at the end of the onMouseWheel function.
function onMouseWheel(event, delta) {
// code
return false;
}
This will disable the default scroll action for the 'mousewheel' event, hence the 'scroll' event will not be triggered.
fiddle
I've come to the realization, that the best solution is to make a custom scrollbar. This way we can avoid calling the scrolling function and having the different types of scrolling interfering with one another.
I have a draggable <div> with a click event and without any event for drag,
but after I drag <div> the click event is apply to <div>.
How can prevent of click event after drag?
$(function(){
$('div').bind('click', function(){
$(this).toggleClass('orange');
});
$('div').draggable();
});
http://jsfiddle.net/prince4prodigy/aG72R/
FIRST attach the draggable event, THEN the click event:
$(function(){
$('div').draggable();
$('div').click(function(){
$(this).toggleClass('orange');
});
});
Try it here:
http://jsfiddle.net/aG72R/55/
With an ES6 class (No jQuery)
To achieve this in javascript without the help of jQuery you can add and remove an event handler.
First create functions that will be added and removed form event listeners
flagged () {
this.isScrolled = true;
}
and this to stop all events on an event
preventClick (event) {
event.preventDefault();
event.stopImmediatePropagation();
}
Then add the flag when the mousedown and mousemove events are triggered one after the other.
element.addEventListener('mousedown', () => {
element.addEventListener('mousemove', flagged);
});
Remember to remove this on a mouse up so we don't get a huge stack of events repeated on this element.
element.addEventListener('mouseup', () => {
element.removeEventListener('mousemove', flagged);
});
Finally inside the mouseup event on our element we can use the flag logic to add and remove the click.
element.addEventListener('mouseup', (e) => {
if (this.isScrolled) {
e.target.addEventListener('click', preventClick);
} else {
e.target.removeEventListener('click', preventClick);
}
this.isScrolled = false;
element.removeEventListener('mousemove', flagged);
});
In the above example above I am targeting the real target that is clicked, so if this were a slider I would be targeting the image and not the main gallery element. to target the main element just change the add/remove event listeners like this.
element.addEventListener('mouseup', (e) => {
if (this.isScrolled) {
element.addEventListener('click', preventClick);
} else {
element.removeEventListener('click', preventClick);
}
this.isScrolled = false;
element.removeEventListener('mousemove', flagged);
});
Conclusion
By setting anonymous functions to const we don't have to bind them. Also this way they kind of have a "handle" allowing s to remove the specific function from the event instead of the entire set of functions on the event.
I made a solution with data and setTimeout. Maybe better than helper classes.
<div id="dragbox"></div>
and
$(function(){
$('#dragbox').bind('click', function(){
if($(this).data('dragging')) return;
$(this).toggleClass('orange');
});
$('#dragbox').draggable({
start: function(event, ui){
$(this).data('dragging', true);
},
stop: function(event, ui){
setTimeout(function(){
$(event.target).data('dragging', false);
}, 1);
}
});
});
Check the fiddle.
This should work:
$(function(){
$('div').draggable({
start: function(event, ui) {
$(this).addClass('noclick');
}
});
$('div').click(function(event) {
if ($(this).hasClass('noclick')) {
$(this).removeClass('noclick');
}
else {
$(this).toggleClass('orange');
}
});
});
DEMO
You can do it without jQuery UI draggable. Just using common 'click' and 'dragstart' events:
$('div').on('dragstart', function (e) {
e.preventDefault();
$(this).data('dragging', true);
}).on('click', function (e) {
if ($(this).data('dragging')) {
e.preventDefault();
$(this).data('dragging', false);
}
});
You can just check for jQuery UI's ui-draggable-dragging class on the draggable. If it's there, don't continue the click event, else, do. jQuery UI handles the setting and removal of this class, so you don't have to. :)
Code:
$(function(){
$('div').bind('click', function(){
if( $(this).hasClass('ui-draggable-dragging') ) { return false; }
$(this).toggleClass('orange');
});
$('div').draggable();
});
With React
This code is for React users, checked the draggedRef when mouse up.
I didn`t use click event. The click event checked by the mouse up event.
const draggedRef = useRef(false);
...
<button
type="button"
onMouseDown={() => (draggedRef.current = false)}
onMouseMove={() => (draggedRef.current = true)}
onMouseUp={() => {
if (draggedRef.current) return;
setLayerOpened(!layerOpened);
}}
>
BTN
</button>
I had the same problem (tho with p5.js) and I solved it by having a global lastDraggedAt variable, which was updated when the drag event ran. In the click event, I just checked if the last drag was less than 0.1 seconds ago.
function mouseDragged() {
// other code
lastDraggedAt = Date.now();
}
function mouseClicked() {
if (Date.now() - lastDraggedAt < 100)
return; // its just firing due to a drag so ignore
// other code
}
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
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()