Opened 5 years ago

Last modified 3 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 5 years ago by bill

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.

comment:2 Changed 5 years ago by bill

Component: General → DnD
Owner: set to Eugene Lazutkin

comment:3 Changed 5 years ago by Jan86

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 5 years ago by bill

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 5 years ago by Eugene Lazutkin

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 3 years ago by dylan

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 3 years ago by dylan

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.

Note: See TracTickets for help on using tickets.