Opened 8 years ago
Last modified 6 years ago
#17710 new defect
dojo.dnd.Moveable stops event bubbling in IE10
Reported by: | Jan86 | Owned by: | Eugene Lazutkin |
---|---|---|---|
Priority: | undecided | Milestone: | 1.15 |
Component: | DnD | Version: | 1.9.2 |
Keywords: | Cc: | ||
Blocked By: | Blocking: |
Description
Hello, during updating my project from 1.8 to dojo 1.9.1 i have many troubles with the event handling in IE10. I want to drag an DIV element via dnd/Movable under a second DIV and listen on the mouseup event of the second DIV. This event never fires in IE10. It works fine in FF, IE9...
Here is a sample code: <!DOCTYPE html> <html> <head><link rel="stylesheet" href="ajax.googleapis.com/ajax/libs/dojo/1.9.2/dijit/themes/claro/claro.css">
<script>dojoConfig = {parseOnLoad: true}</script> <script src="ajax.googleapis.com/ajax/libs/dojo/1.9.2/dojo/dojo.js"></script> <script> require([
"dojo/dnd/Moveable", "dojo/domReady!"
], function(){
var myDraggableObject = new dojo.dnd.Moveable(dojo.byId("dnd"));
dojo.connect(dojo.byId("test"),"onmouseup",function(){
console.info("onmouseup");
});
}); </script>
</head> <body class="claro">
<div id="test" style="height:20px; width:20px; background-color:red; z-index:999; position:absolute;"></div> <div id="dnd" style="height:30px; width:30px; background-color:green; z-index:10; position:absolute;"></div>
</body> </html>
Just drag the green element under the red one. Thanks.
Change History (7)
comment:1 Changed 8 years ago by
comment:2 Changed 8 years ago by
Component: | General → DnD |
---|---|
Owner: | set to Eugene Lazutkin |
comment:3 Changed 8 years ago by
I have the same issue with onmousemove events in outer DIV Elemets. While dragging the DIV element the mousemove event doesn't fire in IE10;
Here is another sample:
<!DOCTYPE html> <html> <head> <link rel="stylesheet" href="//ajax.googleapis.com/ajax/libs/dojo/1.9.2/dijit/themes/claro/claro.css"> <script>dojoConfig = {parseOnLoad: true}</script> <script src="//ajax.googleapis.com/ajax/libs/dojo/1.9.2/dojo/dojo.js"></script> <script> require([ "dojo/dnd/Moveable", "dojo/domReady!" ], function(){ var myDraggableObject = new dojo.dnd.Moveable(dojo.byId("dnd")); dojo.connect(dojo.byId("test"),"onmousemove",function(){ console.info("onmousemove"); }); }); </script> </head> <body class="claro"> <div id="test" style="height:200px; width:200px; background-color:red; z-index:0; position:absolute; display:inline;"> <div id="dnd" style="height:30px; width:30px; background-color:green; z-index:10; position:absolute;"></div> </div> </body> </html>
Is that the same issue?
comment:4 Changed 8 years ago by
Probably... I just checked that Moveable.js does:
on(this.handle, touch.press, lang.hitch(this, "onMouseDown")),
and then its so-called onMouseDown() method calls evt.preventDefault():
onMouseDown: function(e){ ... e.preventDefault(); },
The preventDefault() is presumably there to prevent text-selection while dragging, although that's handleable on IE and chrome through the code already in Moveable to cancel selection:
on(this.handle, "dragstart", lang.hitch(this, "onSelectStart")), on(this.handle, "selectstart", lang.hitch(this, "onSelectStart")) ... onSelectStart: function(e){ // summary: // event processor for onselectevent and ondragevent // e: Event // mouse event if(!this.skip || !dnd.isFormElement(e)){ e.stopPropagation(); e.preventDefault(); } },
Sadly that code doesn't work on firefox.
As a side note, there's also CSS (see http://stackoverflow.com/questions/826782/css-rule-to-disable-text-selection-highlighting) to cancel selection. We could use those classes on draggable/moveable objects and then (while dragging) put them on <body>. But like the code snippet above, we'd need to be careful to not interfere w/selecting text in form elements inside draggable elements.
comment:5 Changed 8 years ago by
Just to confirm: the code in question, and "prevent defaults" are to prevent text/HTML selection. Unfortunately this topic was/is an unresolved incompatible mess even in modern browsers unaddressed directly by standards. Whatever we have mostly works, yet can be defeated by vigorously moving mouse causing an intentional event queue overflow. The latter depends on a browser, its JS engine, how "busy" a web page is, and a computer's speed, and the most readily can be replicated on slow computers.
Obviously in some cases we do want to select text inside draggable objects, including text-based form controls, or error messages in dialog boxes. That's why there are extra check for those conditions.
comment:6 Changed 7 years ago by
Milestone: | tbd → 1.12 |
---|
Will try to get this fixed for Dojo 1.12. Help working on a patch would be greatly appreciated!
comment:7 Changed 6 years ago by
Milestone: | 1.13 → 1.15 |
---|
Ticket planning... move current 1.13 tickets out to 1.15 to make it easier to move tickets into the 1.13 milestone.
Likely the same problem that Tree had, where it's calling evt.preventDefault() on the MSPointerDown / pointerdown event, and that prevents the mousedown event completely.