当我在swiperight上打开面板然后在swipeleft上关闭时，如果我按太多然后向左滑动面板不会关闭，而是它将我移动到主要内容，面板仍然打开，主要的一半内容为空白我如何解决这个问题，这是我的HTML代码。只有当我按住1秒然后用手指在手机上移动时才会发生这种情况。
这是我的HTML代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="format-detection" content="telephone=no" />
<meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width, height=device-height, target-densitydpi=device-dpi" />
<link rel="stylesheet" type="text/css" href="css/jquery.mobile-1.4.0.min.css" />
<link rel="stylesheet" type="text/css" href="css/index.css" />
<script type="text/javascript" src="js/jquery-2.0.3.min.js"></script>
<script type="text/javascript" src="js/jquery.mobile-1.4.0.min.js"></script>
<script type="text/javascript" src="js/panel.js"></script>
<title>Photosi</title>
</head>
<body>
<div data-role="page" id='main-page'>
<div data-role='panel' id='main-panel' data-display='reveal'>
<ul data-role='listview'>
<li><a href='#' data-role='button' data-icon='camera' data-iconpos='left'>Albums</a></li>
<li><a href='#' data-role='button' data-icon='user' data-iconpos='left'>Social</a></li>
<li><a href='#' data-role='button' data-icon='star' data-iconpos='left'>Effects</a></li>
<li><a href='#' data-role='button' data-icon='arrow-u' data-iconpos='left'>Upload</a></li>
<li><a href='#' data-role='button' data-icon='gear' data-iconpos='left'>Settings</a></li>
<li><a href='#' data-role='button' data-icon='info' data-iconpos='left'>Help</a></li>
<li><a href='#' data-role='button' data-icon='delete' data-iconpos='left'>Exit</a></li>
</ul>
</div>
<div data-role="header">
<a href='#main-panel' class='ui-btn ui-icon-grid ui-btn-icon-notext ui-corner-all'></a>
<h1>Albums</h1>
</div>
<div role="main" class="ui-content">
<p>Page content goes here.</p>
<a href='#mypanel' class="ui-btn ui-icon-delete ui-btn-icon-notext ui-corner-all"></a>
</div>
<div data-role="footer">
<h4>Page Footer</h4>
</div>
</div>
<script type="text/javascript" src="cordova.js"></script>
<script type="text/javascript" src="js/index.js"></script>
<script type="text/javascript">
</script>
</body>
</html>
这是我的面板js代码：
$( document ).on( "pagecreate", "#main-page", function() {
$( document ).on( "swiperight", "#main-page", function( e ) {
if ( $( ".ui-page-active" ).jqmData( "panel" ) !== "open" ){
$('#main-panel').panel('open');
}
});
$( document ).on( "swipeleft", "#main-page", function( e ) {
if ( $( ".ui-page-active" ).jqmData( "panel" ) == "open" ){
$('#main-panel').panel('close');
}
});
});