We Keep Coding

Capture all event targets from mouseover when user clicks, then stop

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!

jQuery: Prevent Click Event from being fired after long tap (mobile)

For mobile devices there is not action like right-clicking - so I want to handle a long press for this.
I also need a normal "click" event.
For the long-press handling I found a solution, but when I add an onClick-listener, the onClick gets fired even if I only want the long-press event to be fired.
How can I prevent the Click Event when the longTap event fires?
Here is the Code + example:
var c = console.log.bind(console);
(function() {
$.fn.longTap = function(options) {
options = $.extend({
delay: 1000,
onRelease: null
}, options);
var eventType = {
mousedown: 'ontouchstart' in window ? 'touchstart' : 'mousedown',
mouseup: 'ontouchend' in window ? 'touchend' : 'mouseup'
};
return this.each(function() {
$(this).on(eventType.mousedown + '.longtap', function() {
$(this).data('touchstart', +new Date);
})
.on(eventType.mouseup + '.longtap', function(e) {
var now = +new Date,
than = $(this).data('touchstart');
now - than >= options.delay && options.onRelease && options.onRelease.call(this, e);
});
});
};
})(jQuery);
$('.long-tap').longTap({
delay: 1000, // really long tap
onRelease: function(e) {
c($(this).position(), e);
e.stopImmediatePropagation();
e.preventDefault();
alert('show context menu or something else:');
}
});
$('.long-tap').click(function(){
alert("click");
})
.test {
width: 200px;
height: 100px;
background-color: #DDD;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="test long-tap"></div>

You can use contextmenu for right click event:
$(document).on("contextmenu",function(e){
e.preventDefault();
// do the stuff
});
When you long press with the finger in your mobile device then the context menu will appear.

There is really no good way to do such thing, what you can do is test if longtap event is registered on event target for click event handler:
$('.long-tap').click(function(){
if ($(this).data('touchstart')) {
return;
}
...
});
In general, I think your general approach to implement context menu for touch screen devices should be reconsidered.
Best of luck!

How to prevent click event on anchors when making touch and mouse drag events on its wrapper

How to prevent click event on anchors (redirects to href url, in demo redirecting to google) inside some wrapper when making touch and mouse drag events on this wrapper? With preventDefault and stopPropagation I can only limit bubbling up the DOM, right?
I want to disable links when dragging, and enable click while not dragging.
Here's demo with the problem.
var items = $('#items');
function start(event) {
event.preventDefault();
console.log('touchstart mousedown');
items.on('touchmove mousemove', move);
items.on('touchend mouseup', end);
return false;
}
function move(event) {
console.log('touchmove mousemove');
return false;
}
function end(event) {
console.log('touchend mouseup');
items
.off('touchmove mousemove')
.off('touchend mouseup');
return false;
}
items.on('touchstart mousedown', start);
https://jsfiddle.net/9oxr4quz/4/

I came up with two solutions:
First:
when the mousemove event is triggered, bind a click event and call preventDefault on the event object, to prevent the browser to follow the link. Turn off the jquery click handlers when the touchstart and/or mousedown are triggered.
Javascript:
var items = $('#items a'); // Notice I changed the selector here
function start(event) {
event.preventDefault();
console.log('touchstart mousedown');
items.off('click');
items.on('touchmove mousemove', move);
items.on('touchend mouseup', end);
return false;
}
...
function move(event) {
items.on('click', function(event){ event.preventDefault(); });
console.log('touchmove mousemove');
return false;
}
...
Working demo: http://codepen.io/anon/pen/WvjrPd
Second:
Handle the click events by yourself, that way you can decide when the browser should visit another site and when should do nothing. This can be achieved by replacing the href attribute by a data-link or data-href attribute.
Now, when the touchstart or mousedown events are triggered, turn on the click events; if any of those events lead to a mousemove event, turn off the click events:
HTML:
<div id="items" class="items">
<div class="item">
<a data-link="http://google.com">Anchor</a>
</div>
<div class="item">
<a data-link="http://google.com">Anchor</a>
</div>
</div>
Javascript:
var items = $('#items a'); // Notice I changed the selector here
function start(event) {
event.preventDefault();
console.log('touchstart mousedown');
items.on('click', click); // Turn on click events
items.on('touchmove mousemove', move);
items.on('touchend mouseup', end);
return false;
}
function move(event) {
items.off('click'); // Turn off click events
console.log('touchmove mousemove');
return false;
}
...
function click(event) { // Visit the corresponding link
var link = $(this).attr('data-link');
alert('Visit link: ' + link);
// window.location.href = link;
}
items.on('touchstart mousedown', start);
CSS:
.item {
background-color: gray;
}
.item + .item {
margin-top: 10px;
}
.item a {
cursor: pointer;
display: inline-block;
background-color: blue;
color: white;
padding: 9px;
width: 100%;
height: 100%;
}
Working demo: http://codepen.io/anon/pen/EjmPrJ

What about a CSS approach with JavaScript of using disabling all pointer events when touching or or move then add them back. A quick one is define CSS like this:
a.prevent-me {
pointer-events: none; /* This line */
cursor: default;
}
the using jquery add the class and remove the class like below as needed in your events.
...
$(".item a").addClass("prevent-me");
...
...
$(".item a").removeClass("prevent-me");
...
So the whole solution, I havent tested it might be
var items = $('#items');
function start(event) {
event.preventDefault();
console.log('touchstart mousedown');
$(".item a").addClass("prevent-me"); //remove all click events
items.on('touchmove mousemove', move);
items.on('touchend mouseup', end);
return false;
}
function move(event) {
console.log('touchmove mousemove');
return false;
}
function end(event) {
console.log('touchend mouseup');
items
.off('touchmove mousemove')
.off('touchend mouseup');
$(".item a").removeClass("prevent-me"); //enable back click
return false;
}
items.on('touchstart mousedown', start);

Prevent click event after drag in jQuery

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
}

Resize an element (li) by it's edges

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