Develop Reference

How do I delegate a keypress up/down event to scroll another element?

I have a page with a scrollable element. My problem is that I want the up/down arrows to scroll this element even if it does not currently have focus.
I'm trying to just trigger a keydown with the same event when any keydown event is detected outside the target element.
$(document).keydown(function(e) {
if ($(e.target).hasClass('box')) {
return;
}
$('.box').trigger('keydown', e);
})
See this JS fiddle: https://jsfiddle.net/4tx6aqrr/2
This is not working. Is what I want to do possible?

Avoid Click event if mouse moved on div element

Is there any (css or dom) property that could be set on a DIV element or any other clean/standard way to avoid firing a click event when the mouse is moved after the mousedown?
Suppose there is one div element within another div. The goal is to prevent the click event on the parent also when the mouse is moved on its (smaller) descendant (to avoid event handling on descendants).
With no prevention, mousedown + mousemove + mouseup fires a click event.
The goal is either kind of mousemove "aborts" the mousedown on the element or prevents the click after mouseup

Mousewheel handler for child element and his parent

I made a jQuery plugin that replaces default scrollbar with my own and handles mousewheeling and dragging the bar events.
When I put the content with my scrollbar into another content with my scrollbar, and then if I use mousewheel on the child content, the parent content wheels as well.
It happens because I bound mousewheel event listener to both child and parent contents, and when my mouse over them both, it triggers both event handlers.
The problem is that I need to wheel only the child content without affecting the parent.
Do you have any tips how to resolve that? Dragging scrollbar event works ok.

You need to stop the propagation of the event. This will stop the event from bubbling up the DOM tree and triggering on parent elements.
http://jsbin.com/yelijelowa/1/edit?js,output
$('body').on('mousewheel', function (e) {
alert('Body scroll');
});
$('.child').on('mousewheel', function (e) {
e.stopPropagation();
alert('Child scroll only');
});
If you comment out the e.stopPropagation(); line you'll note that both alerts fire.
Documentation:
MDN
jQuery API

javascript document onmousedown cancels element onclick

I have document.addEventListener('mousedown', ...) performing some visual feedback to the user. But I also have dynamicaly created elements with elem.addEventListener('click') which are not fired. If I remove document mousedown listener then clicks on elements are triggered (or if I change document's mousedown to click event). Why is that and how to solve this? I would realy need document to handle mousedown and still be able for elements to recieve their click/tap events.
FIDDLE: http://codepen.io/hpet/pen/izpJK
if you uncomment document mousedown event, element receives click ok, otherwise click on element is never triggered.
Fiddle updated. Uncomment lines 22/23 (setting position) will not fire click event.

The root cause of your problem is overlapping elements.
Since you're moving the circle element on top of the square element in your mousedown handler, the subsequent mouseup event will be triggered on the circle. Since that event was not triggered on the square element, no click event will be generated.
If you have to keep the circle element on top of the square, you can use the pointer-events CSS rule to force mouse events to "go through" the circle element.

scroll event only when hovering over certain object

i have a page with an object where you can zoom in and out. now i want to find a way to run a special zoom function if the user scrolls and the cursor is over this object at this time.
if the cursor is somewhere else the page should scroll normal but the page should not move if the cursor is over this object.
the problem what i am having now is, there could be an extra function which can detect if the cursor is over the image and save it, but this does not prevent the page from scrolling

You can use mouseover and mouseout or mouseenter and mouseleave events to detect if the cursor is over the image. You could also use the mousewheel event and stop the propagation and prevent the default behaviour.
document.getElementById("noscroll").addEventListener("mousewheel", function (event) {
event.preventDefault();
event.stopPropagation();
}, false);