Skip to content

Commit e12e3e1

Browse files
mikesherovmikesherov
committed
Mouse: Only detect out of document mouseups after a mousemove
This prevents the firing of mouseup in the case of IE<9, which will fire a mousemove event if content is placed under the cursor on mousedown. Fixes #7778
1 parent 233f08e commit e12e3e1

5 files changed

Lines changed: 79 additions & 7 deletions

File tree

‎tests/jquery.simulate.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -144,7 +144,7 @@ $.extend( $.simulate.prototype, {
144144
0: 1,
145145
1: 4,
146146
2: 2
147-
}[ event.button ] || event.button;
147+
}[ event.button ] || ( event.button === -1 ? 0 : event.button );
148148
}
149149

150150
return event;

‎tests/unit/draggable/draggable_core.js‎

Lines changed: 17 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -111,6 +111,23 @@ test( "#8269: Removing draggable element on drop", function() {
111111
}
112112
});
113113

114+
// http://bugs.jqueryui.com/ticket/7778
115+
// drag element breaks in IE8 when its content is replaced onmousedown
116+
test( "Stray mousemove after mousedown still drags", function() {
117+
expect( 2 );
118+
119+
var element = $( "#draggable1" ).draggable({ scroll: false });
120+
121+
// In IE8, when content is placed under the mouse (e.g. when draggable content is replaced
122+
// on mousedown), mousemove is triggered on those elements even though the mouse hasn't moved.
123+
// Support: IE <9
124+
element.bind( "mousedown", function() {
125+
$( document ).simulate( "mousemove", { button: -1 });
126+
});
127+
128+
TestHelpers.draggable.shouldMove( element, "element is draggable" );
129+
});
130+
114131
test( "#6258: not following mouse when scrolled and using overflow-y: scroll", function() {
115132
expect( 2 );
116133

‎tests/visual/draggable/replaced.html‎

Lines changed: 38 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,38 @@
1+
<!doctype html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="utf-8">
5+
<title>Draggable Visual Test</title>
6+
<link rel="stylesheet" href="../../../themes/base/all.css">
7+
<script src="../../../external/jquery/jquery.js"></script>
8+
<script src="../../../ui/core.js"></script>
9+
<script src="../../../ui/widget.js"></script>
10+
<script src="../../../ui/mouse.js"></script>
11+
<script src="../../../ui/draggable.js"></script>
12+
<script>
13+
$(function() {
14+
$( "#draggable" )
15+
.draggable()
16+
.bind( "mousedown", function() {
17+
$( this ).html( "<div>replaced</div>" );
18+
});
19+
});
20+
</script>
21+
22+
<style>
23+
#draggable {
24+
background: green;
25+
height: 75px;
26+
width: 75px;
27+
}
28+
</style>
29+
</head>
30+
<body>
31+
32+
<p>WHAT: A draggable, whose content is replaced onmousedown.</p>
33+
<p>EXPECTED: In IE8, the draggable can actually be dragged.</p>
34+
35+
<div id="draggable"><div>content</div></div>
36+
37+
</body>
38+
</html>

‎tests/visual/index.html‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -40,6 +40,11 @@ <h2>Dialog</h2>
4040
<li><a href="dialog/stacking.html">Overlapping dialogs</a></li>
4141
</ul>
4242

43+
<h2>Draggable</h2>
44+
<ul>
45+
<li><a href="draggable/replaced.html">Replaced Content On Mousedown</a></li>
46+
</ul>
47+
4348
<h2>Effects</h2>
4449
<ul>
4550
<li><a href="effects/all.html">All</a></li>

‎ui/mouse.js‎

Lines changed: 18 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -70,6 +70,8 @@ return $.widget("ui.mouse", {
7070
return;
7171
}
7272

73+
this._mouseMoved = false;
74+
7375
// we may have missed mouseup (out of window)
7476
(this._mouseStarted && this._mouseUp(event));
7577

@@ -123,13 +125,23 @@ return $.widget("ui.mouse", {
123125
},
124126

125127
_mouseMove: function(event) {
126-
// IE mouseup check - mouseup happened when mouse was out of window
127-
if ($.ui.ie && ( !document.documentMode || document.documentMode < 9 ) && !event.button) {
128-
return this._mouseUp(event);
128+
// Only check for mouseups outside the document if you've moved inside the document
129+
// at least once. This prevents the firing of mouseup in the case of IE<9, which will
130+
// fire a mousemove event if content is placed under the cursor. See #7778
131+
// Support: IE <9
132+
if ( this._mouseMoved ) {
133+
// IE mouseup check - mouseup happened when mouse was out of window
134+
if ($.ui.ie && ( !document.documentMode || document.documentMode < 9 ) && !event.button) {
135+
return this._mouseUp(event);
136+
137+
// Iframe mouseup check - mouseup occurred in another document
138+
} else if ( !event.which ) {
139+
return this._mouseUp( event );
140+
}
141+
}
129142

130-
// Iframe mouseup check - mouseup occurred in another document
131-
} else if ( !event.which ) {
132-
return this._mouseUp( event );
143+
if ( event.which || event.button ) {
144+
this._mouseMoved = true;
133145
}
134146

135147
if (this._mouseStarted) {

0 commit comments

Comments
 (0)