Skip to content

Commit 2d8990d

Browse files
author
Gabriel Schulhof
committed
Panel: Ignore click event whose default has been prevented
Check whether the default on the event that would close the panel has been prevented, and ignore it if so. Fixes jquery-archivegh-6693
1 parent acea5f8 commit 2d8990d

File tree

3 files changed

+64
-11
lines changed

3 files changed

+64
-11
lines changed

js/widgets/panel.js

Lines changed: 19 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -145,16 +145,27 @@ $.widget( "mobile.panel", {
145145
this.element.addClass( this._getPanelClasses() );
146146
},
147147

148-
_bindCloseEvents: function() {
149-
var self = this;
150-
151-
self._closeLink.on( "click.panel" , function( e ) {
152-
e.preventDefault();
153-
self.close();
148+
_handleCloseClickAndEatEvent: function( event ) {
149+
if ( !event.isDefaultPrevented() ) {
150+
event.preventDefault();
151+
this.close();
154152
return false;
153+
}
154+
},
155+
156+
_handleCloseClick: function( event ) {
157+
if ( !event.isDefaultPrevented() ) {
158+
this.close();
159+
}
160+
},
161+
162+
_bindCloseEvents: function() {
163+
this._on( this._closeLink, {
164+
"click": "_handleCloseClick"
155165
});
156-
self.element.on( "click.panel" , "a:jqmData(ajax='false')", function(/* e */) {
157-
self.close();
166+
167+
this._on({
168+
"click a:jqmData(ajax='false')": "_handleCloseClick"
158169
});
159170
},
160171

@@ -475,8 +486,6 @@ $.widget( "mobile.panel", {
475486
.off( "updatelayout" )
476487
.off( this._transitionEndEvents );
477488

478-
this._closeLink.off( "click.panel" );
479-
480489
if ( this._modal ) {
481490
this._modal.remove();
482491
}

tests/unit/panel/index.html

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -67,7 +67,9 @@
6767
<p>Contents of a panel.</p>
6868
<a href="#demo-links" data-nstest-rel="close" data-nstest-role="button">Close panel</a>
6969
</div>
70-
70+
<div data-nstest-role="panel" id="panel-test-ignore-unrelated-link">
71+
<a href="#" id="unrelated-link" data-nstest-ajax="false">Unrelated link</a>
72+
</div>
7173
<div data-nstest-role="header">
7274
<h1>Panel Test</h1>
7375
</div>

tests/unit/panel/panel_core.js

Lines changed: 42 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -284,4 +284,46 @@
284284
$panel.panel( "open" );
285285
});
286286

287+
// Test for https://github.com/jquery/jquery-mobile/issues/6693
288+
asyncTest( "unrelated link does not close the panel", function() {
289+
var panel = $( "#panel-test-ignore-unrelated-link" ),
290+
eventNs = ".ignoreUnrelatedLinkClick";
291+
292+
$( "#unrelated-link" ).one( "click", function( event ) {
293+
event.preventDefault();
294+
});
295+
296+
$.testHelper.detailedEventCascade([
297+
function() {
298+
panel.panel( "open" );
299+
},
300+
301+
{
302+
panelopen: { src: panel, event: "panelopen" + eventNs + "1" }
303+
},
304+
305+
function( result ) {
306+
deepEqual( result.panelopen.timedOut, false,
307+
"Panel opened successfully" );
308+
$( "#unrelated-link" ).click();
309+
},
310+
311+
{
312+
panelclose: { src: panel, event: "panelclose" + eventNs + "2" }
313+
},
314+
315+
function( result ) {
316+
deepEqual( result.panelclose.timedOut, true,
317+
"Panel did not close in response to unrelated click" );
318+
panel.panel( "close" );
319+
},
320+
321+
{
322+
panelclose: { src: panel, event: "panelclose" + eventNs + "3" }
323+
},
324+
325+
start
326+
]);
327+
});
328+
287329
}( jQuery ));

0 commit comments

Comments
 (0)