Losing Mouseup Event If Releasing Not Over the Same Element

Losing MouseUp event if releasing not over the same element

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

why one html element's onmouseup event is not firing during drag and drop?

It does seem to work for me when I mouse up and down within the target, here's a "jsfiddle" with your code, plus a black border around the target: http://jsfiddle.net/prsYk/

However, when I mouse down and "drag" my mouse outside the target's region, and then mouse up - no event is fired. I would say this has everything to do with that fact that the mouse is no longer in the target's region when you mouse up.

This fiddle: http://jsfiddle.net/V4HPw/ shows that both events still fire when you attach the events to the document object, you currently are attaching them to your t target, which is the element with the black border.

If you implement actual dragging, where the element changes its positioning as you move your mouse, then the onmouseup event should fire when you release because you're still within the target's region.

Instead of re-inventing the wheel though, perhaps a Javascript library might help to kill the pain of implementing the actual drag/drop functionality:

• YUI DragDrop module
• jquery Draggable

Both of the above libraries will also provide you with the convenience methods to manipulation DOM elements, and much much more - as I notice your 'todo' note to learn about 'getting elements'.

Hope that helps!

why is mouseup event not firing when releasing outside div in this react code (using window.addEventListener)

I figured out when dragging mouse from Inside Div to Outside, text was selected and moved together. This changed behaviour of mouse event. I tried putting user-select: none; to .app's css and it works properly. Take a look at my code:

class App extends React.Component { constructor() {    super();   this.handleMouseUp = this.handleMouseUp.bind(this);    this.handleMouseDown = this.handleMouseDown.bind(this);  }  handleMouseDown(e){    console.log('handleMouseDown - add Listeners')          window.addEventListener('mouseup', this.handleMouseUp, true)  }
  handleMouseUp(e) {    console.log('handleMouseUp - remove Listeners')          window.removeEventListener('mouseup', this.handleMouseUp, true);  }     render() {    return (      <div className="App" style={{ border: '1px solid blue', height:300, padding:50 }} >        Main Div - Top        <div style={{ border: '1px solid black', height:100 }} onMouseDown={this.handleMouseDown}>  Inside Divn </div>        Main Div - Bottom      </div>    )  }}
ReactDOM.render(  <App  />,  document.getElementById('container'));

.App {  text-align: center;  user-select: none;}

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script><script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script><div id="container">    <!-- This element's contents will be replaced with your component. --></div>

Mouseup lost when leaving iframe: leads to reversed input

This bug is already fixed in Chrome 70, which has been announced to release October 16, 2018. I have already tested with Chrome 70 in the beta channel and I confirm that it was indeed fixed.

jQuery mouseup not firing after drag off link

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.

Prevent MouseUp when click starts outside of object

On roll over, start listening to mouse down and mouse up, if up before down, it's a "fake"

this.addeventlistener(MouseEvent.ROLL_OVER, onOver)

...

the mouseup event stop the click event on firefox

The issue (I would call it bug) seems to be the modification of the innerHTML.

Based on the specification a click should be triggered when mousedown and mouseup fire on the same target(element).

When you modify the innerHTML on mousedown, you replace a Node (a TextNode) with a new TextNode, the target for mouseup seems to change.

But that isn't the expected behaviour, because the target should be a ElementNode, not a TextNode(and it's still the same Element).

Possible fix:
modify the content of the existing TextNode instead of the innerHTML:

var div = document.querySelector('div');

function fn(e){ div.firstChild.data='Event:'+e.type;}
div.addEventListener('mousedown',fn);
div.addEventListener('mouseup',fn);
div.addEventListener('click',fn);

<div>  click me</div>

---

Related Topics