Skip to content

Commit a69a178

Browse files
kborchersscottgonzalez
authored andcommitted
Button: Don't fire click/change events if mouse was dragged during click of toggle (checkbox/radio) button. Fixed #6970 - Button state inconsistencies after (accidental) drag-clicking the button.
1 parent aec3f18 commit a69a178

File tree

1 file changed

+26
-3
lines changed

1 file changed

+26
-3
lines changed

ui/jquery.ui.button.js

Lines changed: 26 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -13,7 +13,7 @@
1313
*/
1414
(function( $, undefined ) {
1515

16-
var lastActive,
16+
var lastActive, startXPos, startYPos, clickDragged,
1717
baseClasses = "ui-button ui-widget ui-state-default ui-corner-all",
1818
stateClasses = "ui-state-hover ui-state-active ",
1919
typeClasses = "ui-button-icons-only ui-button-icon-only ui-button-text-icons ui-button-text-icon-primary ui-button-text-icon-secondary ui-button-text-only",
@@ -112,21 +112,44 @@ $.widget( "ui.button", {
112112

113113
if ( toggleButton ) {
114114
this.element.bind( "change.button", function() {
115+
if ( clickDragged ) {
116+
return;
117+
}
115118
self.refresh();
116119
});
120+
// if mouse moves between mousedown and mouseup (drag) set clickDragged flag
121+
// prevents issue where button state changes but checkbox/radio checked state
122+
// does not in Firefox (see ticket #6970)
123+
this.buttonElement
124+
.bind( "mousedown.button", function( event ) {
125+
if ( options.disabled ) {
126+
return;
127+
}
128+
clickDragged = false;
129+
startXPos = event.pageX;
130+
startYPos = event.pageY;
131+
})
132+
.bind( "mouseup.button", function( event ) {
133+
if ( options.disabled ) {
134+
return;
135+
}
136+
if ( startXPos !== event.pageX || startYPos !== event.pageY ) {
137+
clickDragged = true;
138+
}
139+
});
117140
}
118141

119142
if ( this.type === "checkbox" ) {
120143
this.buttonElement.bind( "click.button", function() {
121-
if ( options.disabled ) {
144+
if ( options.disabled || clickDragged ) {
122145
return false;
123146
}
124147
$( this ).toggleClass( "ui-state-active" );
125148
self.buttonElement.attr( "aria-pressed", self.element[0].checked );
126149
});
127150
} else if ( this.type === "radio" ) {
128151
this.buttonElement.bind( "click.button", function() {
129-
if ( options.disabled ) {
152+
if ( options.disabled || clickDragged ) {
130153
return false;
131154
}
132155
$( this ).addClass( "ui-state-active" );

0 commit comments

Comments
 (0)