Fix closing on mobile devices when draggable

StephanWagner · Mar 2, 2021 · ab12b83 · ab12b83
1 parent 4d41ae2
commit ab12b83
Show file tree

Hide file tree

Showing 9 changed files with 21 additions and 15 deletions.
diff --git a/demo/es6/package-lock.json b/demo/es6/package-lock.json
diff --git a/demo/es6/package.json b/demo/es6/package.json
@@ -6,7 +6,7 @@
   "license": "ISC",
   "main": "index.js",
   "dependencies": {
-    "jbox": "^1.2.10"
+    "jbox": "^1.2.11"
   },
   "devDependencies": {
     "snowpack": "^3.0.11"

diff --git a/dist/jBox.all.js b/dist/jBox.all.js
diff --git a/dist/jBox.all.min.js b/dist/jBox.all.min.js
diff --git a/dist/jBox.js b/dist/jBox.js
diff --git a/dist/jBox.min.js b/dist/jBox.min.js
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "jbox",
-  "version": "1.2.11",
+  "version": "1.2.12",
   "description": "jBox is a jQuery plugin that makes it easy to create customizable tooltips, modal windows, image galleries and more.",
   "keywords": [
     "jquery-plugin",

diff --git a/src/js/jBox.js b/src/js/jBox.js
@@ -346,7 +346,9 @@ function jBoxWrapper(jQuery) {
       var handle = this.options.draggable == 'title' ? this.titleContainer : (this.options.draggable instanceof jQuery ? this.options.draggable : (jQuery.type(this.options.draggable) == 'string' ? jQuery(this.options.draggable) : this.wrapper));
 
       // Abort if no handle or if draggable was set already
-      if (!handle || !(handle instanceof jQuery) || !handle.length || handle.data('jBox-draggable')) return false;
+      if (!handle || !(handle instanceof jQuery) || !handle.length || handle.data('jBox-draggable')) {
+        return false;
+      }
 
       // Add mouse events
       handle.addClass('jBox-draggable').data('jBox-draggable', true).on('touchstart mousedown', function (ev)
@@ -481,7 +483,7 @@ function jBoxWrapper(jQuery) {
       if (this.options.closeButton) {
         var closeButtonSVG = this._createSVG('svg', [['viewBox', '0 0 24 24']]);
         closeButtonSVG.appendChild(this._createSVG('path', [['d', 'M22.2,4c0,0,0.5,0.6,0,1.1l-6.8,6.8l6.9,6.9c0.5,0.5,0,1.1,0,1.1L20,22.3c0,0-0.6,0.5-1.1,0L12,15.4l-6.9,6.9c-0.5,0.5-1.1,0-1.1,0L1.7,20c0,0-0.5-0.6,0-1.1L8.6,12L1.7,5.1C1.2,4.6,1.7,4,1.7,4L4,1.7c0,0,0.6-0.5,1.1,0L12,8.5l6.8-6.8c0.5-0.5,1.1,0,1.1,0L22.2,4z']]));
-        this.closeButton = jQuery('<div class="jBox-closeButton jBox-noDrag"/>').on('click tap', function (ev) { this.close({ignoreDelay: true}); }.bind(this)).append(closeButtonSVG);
+        this.closeButton = jQuery('<div class="jBox-closeButton jBox-noDrag"/>').on('click tap', function (ev) { this.close({ignoreDelay: true}); ev.stopPropagation(); }.bind(this)).append(closeButtonSVG);
 
         // Add close button to jBox container
         if (this.options.closeButton == 'box' || (this.options.closeButton === true && !this.options.overlay && !this.options.title && !this.options.getTitle)) {