Develop Reference

what is the name of event?

i wanna make event when i click on element and move cursor to another element then release cursor.
i made it using mouseup and mousedown events.
but some time mouseup not work!!!
the cursor change to hand and cant release it on another element.
for(var i=0;i<20;i++) {
for(var j=0;j<20;j++) {
var circle = document.createElement("div");
circle.setAttribute("class","circle");
circle.setAttribute("id",20*(i-1)+j);
circle.setAttribute("style","left:"+(35*(j+1)+20*j)+"px;top:"+(10*(i+1)+20*i)+"px;");
circle.addEventListener("mouseup",function() { ...});
circle.addEventListener("mousedown",function() { ...});
body.appendChild(circle);
}
}

If you mousedown and then mousemove away from the element, the mouseup event never fires.
Try adding preventDefault() to your mousedown handler...
circle.addEventListener("mousedown",function(e) { e.preventDefault(); ... });
You may also try binding the mouseleave event to trigger the mouseup

d3 drag fires event even when dx and dy is 0

when i try to create a new d3.drag() function and bind it afterwards to my selection the "drag" event fires even when i didn't move the mouse (dx and dy = 0) on click.
I wan't to call a click handler when there was no "drag".
var drag = d3.drag()
.on('start', dragStart)
.on('drag', dragging)
.on('end', dragEnd);
viewPort.on('click', function () {
clicked = true;
})
.call(drag);
I expect that clicked = true and "drag" doesn't fire when i don't move the mouse on click. Now clicked is true but "drag" is also fired.

Elabourating on my comment a little more: a mousedown event will fire the dragstart event in d3.js, so you can't really prevent the callback from being invoked. That, by definition, means that dragstart always fires before the click event is registered, and that's why you cannot prevent dragstart from firing in the event handler invoked bu click. The chain of event that happens when you click and release an element:
The mousedown event is fired: this triggers dragstart event in d3.js
The mouseup event is fired: this triggers the dragend event in d3.js
The click event is fired
click fires after both the mousedown and mouseup events have fired, in that order.
Source: see MDN docs on mouse-related events
This also means that the dragstart event will always fire, even when there is no cursor/pointer/mouse movement, because at that point in time, the browser has no idea whether any movement has detected, when the mousedown event is triggered.
What you can do, however, is to set up some kind of guard clause that simply does not allow further execution of logic in the callback should the dx and dy of the event register as zero.

On mouse down, click event is getting triggered in react

Click event is getting triggered on mouse down event. Is there any way to cancel the click event and just trigger the mouse down event?
<div onClick={this.onClick}
onMouseDown={this.onMouseDown}> </div>
I am using react 16.

What you could do is have separate nested div for different events:
<div onClick={this.onClick}>
<div onMouseDown={this.onMouseDown}> </div>
</div>
And then, can use stopPropagation() on the events like this:
onMouseDown: function(e) {
e.stopPropagation();
console.log('onMouseDown');
}

Click event occurs when mouseDown and mouseUp occurs on an event. So when you trigger a click event, first a mouseDown event is fired. You can put a function on onMouseUp event so that it gets triggered when the mouse button is released.

jQuery mouseup not firing after drag off link

See this jsfiddle:
http://jsfiddle.net/CB87X/6/
Click and hold the button, drag off the button and release. As you can see, the mouseup event never fires if the mouse is not over the element when the mouse button is released. Thus, the styling in my example never changes back to its original. How do you fire the mouseup event if the mouse button is released when not over the clicked element?
Edit1: BTW I have looked at several solutions on this site, implemented them, and the mouseup event still did not fire.

The mouseup event is relative to where the pointer is and this is expected behaviour. If you want your button to style properly, bind the mouseleave event as well.

This should do the trick. If you left click on the button (.but) and drag off, you can mouseup anywhere on the page and still fire the click event. If you mouseleave the page 'body' and mouseup, the binded mouseleave event is unbinded.
$('.but').mousedown( function(e) {
if (e.which == 1) {
var $this = $(this);
$this.bind('mouseleave', function(){
$('body').one('mouseup', function() {
$this.click();
});
});
$this.mouseup(function() {
$(this).unbind('mouseleave');
});
}
});

Forked your exemple to provide a working example:
http://jsfiddle.net/67Rrs/2/
Once the button is mousedowned, an event is bound to the next mouseup, wherever it happens, that resets the style.

Just use $(document).on('mouseup dragend', somefunc);

Losing MouseUp event if releasing not over the same element

I have got a problem with a slider. When i grab the handler, i change the .src of the image, just to change its color. However, i want it to change back to the original color when i release the mouse button. I have tried two things.
1) Changing it back on the handler mouseup event: this works only if i release the button over the handler, so this is not a solution.
2)Changin it back on the window mouseup event: the event is not firing properly. If i click and release on any place of the window, the event fires normaly, but if i click in the handler, move the cursor to any other point of the window, and then release the button, the event will not fire.
Btw, im using the prototype js framework.
Solutions? Thanks
Here is the code. I load the handler function when the document is ready.
function handler()
{
var handler = $('handler');
Event.observe(window, "mouseup", function(){
alert('salta'); //to see when mouseup fires
if(handler.src=='http://localhost/moodle/blocks/videoavatar/eggface/trunk/gripper_o.png'){ //orange
handler.src='http://localhost/moodle/blocks/videoavatar/eggface/trunk/gripper.png';} //grey
});
Event.observe(handler,'mousedown',function(){handler.src='http://localhost/moodle/blocks/videoavatar/eggface/trunk/gripper_o.png';}); //orange
}

You should be attaching the mouseup handler to the document object.

How about onmouseout event?

Here is the code. I load the handler function when the document is ready.
function handler()
{
var handler = $('handler');
Event.observe(window, "mouseup", function(){
alert('salta'); //to see when mouseup fires
if(handler.src=='http://localhost/moodle/blocks/videoavatar/eggface/trunk/gripper_o.png'){ //orange
handler.src='http://localhost/moodle/blocks/videoavatar/eggface/trunk/gripper.png';} //grey
});
Event.observe(handler,'mousedown',function(){handler.src='http://localhost/moodle/blocks/videoavatar/eggface/trunk/gripper_o.png';}); //orange
}