diff --git a/dist/viewer.common.js b/dist/viewer.common.js
index 3ddc0249..13b1278f 100644
--- a/dist/viewer.common.js
+++ b/dist/viewer.common.js
@@ -5,7 +5,7 @@
  * Copyright 2015-present Chen Fengyuan
  * Released under the MIT license
  *
- * Date: 2023-09-17T03:16:38.052Z
+ * Date: 2023-10-20T00:16:37.130Z
  */
 
 'use strict';
@@ -1199,13 +1199,24 @@ var render = {
 
 var events = {
   bind: function bind() {
+    var _this = this;
     var options = this.options,
       viewer = this.viewer,
       canvas = this.canvas;
     var document = this.element.ownerDocument;
     addListener(viewer, EVENT_CLICK, this.onClick = this.click.bind(this));
     addListener(viewer, EVENT_DRAG_START, this.onDragStart = this.dragstart.bind(this));
-    addListener(canvas, EVENT_POINTER_DOWN, this.onPointerDown = this.pointerdown.bind(this));
+    // Use the new event binding to replace the original binding.
+    addListener(canvas, EVENT_POINTER_DOWN, function (event) {
+      _this.lastPointerPosition = {
+        x: event.pageX,
+        y: event.pageY
+      };
+      // Then call the original event handler function.
+      if (_this.pointerdown) {
+        _this.pointerdown(event);
+      }
+    });
     addListener(document, EVENT_POINTER_MOVE, this.onPointerMove = this.pointermove.bind(this));
     addListener(document, EVENT_POINTER_UP, this.onPointerUp = this.pointerup.bind(this));
     addListener(document, EVENT_KEY_DOWN, this.onKeyDown = this.keydown.bind(this));
@@ -2239,6 +2250,16 @@ var methods = {
       naturalWidth = imageData.naturalWidth,
       naturalHeight = imageData.naturalHeight;
     ratio = Math.max(0, ratio);
+
+    // After determining the zoom ratio, check if a pivot has already been provided. 
+    // If not, and we have the last pointerdown position, use it to set the pivot.
+    if (!pivot && this.lastPointerPosition) {
+      var offset = getOffset(this.viewer);
+      pivot = {
+        x: this.lastPointerPosition.x - offset.left,
+        y: this.lastPointerPosition.y - offset.top
+      };
+    }
     if (isNumber(ratio) && this.viewed && !this.played && (_zoomable || options.zoomable)) {
       if (!_zoomable) {
         var minZoomRatio = Math.max(0.01, options.minZoomRatio);
@@ -2280,15 +2301,15 @@ var methods = {
       }
       this.zooming = true;
       if (_originalEvent) {
-        var offset = getOffset(this.viewer);
+        var _offset = getOffset(this.viewer);
         var center = pointers && Object.keys(pointers).length > 0 ? getPointersCenter(pointers) : {
           pageX: _originalEvent.pageX,
           pageY: _originalEvent.pageY
         };
 
         // Zoom from the triggering point of the event
-        imageData.x -= offsetWidth * ((center.pageX - offset.left - x) / width);
-        imageData.y -= offsetHeight * ((center.pageY - offset.top - y) / height);
+        imageData.x -= offsetWidth * ((center.pageX - _offset.left - x) / width);
+        imageData.y -= offsetHeight * ((center.pageY - _offset.top - y) / height);
       } else if (isPlainObject(pivot) && isNumber(pivot.x) && isNumber(pivot.y)) {
         imageData.x -= offsetWidth * ((pivot.x - x) / width);
         imageData.y -= offsetHeight * ((pivot.y - y) / height);
@@ -2966,6 +2987,7 @@ var Viewer = /*#__PURE__*/function () {
     this.zooming = false;
     this.pointerMoved = false;
     this.id = getUniqueID();
+    this.lastPointerPosition = null; // Initialize the lastPointerPosition attribute
     this.init();
   }
   _createClass(Viewer, [{
diff --git a/dist/viewer.css b/dist/viewer.css
index b944f165..6bfcf82b 100644
--- a/dist/viewer.css
+++ b/dist/viewer.css
@@ -5,7 +5,7 @@
  * Copyright 2015-present Chen Fengyuan
  * Released under the MIT license
  *
- * Date: 2023-09-17T03:16:35.830Z
+ * Date: 2023-10-20T00:16:34.903Z
  */
 
 .viewer-zoom-in::before, .viewer-zoom-out::before, .viewer-one-to-one::before, .viewer-reset::before, .viewer-prev::before, .viewer-play::before, .viewer-next::before, .viewer-rotate-left::before, .viewer-rotate-right::before, .viewer-flip-horizontal::before, .viewer-flip-vertical::before, .viewer-fullscreen::before, .viewer-fullscreen-exit::before, .viewer-close::before {
diff --git a/dist/viewer.esm.js b/dist/viewer.esm.js
index dd421556..1dd46c40 100644
--- a/dist/viewer.esm.js
+++ b/dist/viewer.esm.js
@@ -5,7 +5,7 @@
  * Copyright 2015-present Chen Fengyuan
  * Released under the MIT license
  *
- * Date: 2023-09-17T03:16:38.052Z
+ * Date: 2023-10-20T00:16:37.130Z
  */
 
 function ownKeys(e, r) {
@@ -1197,13 +1197,24 @@ var render = {
 
 var events = {
   bind: function bind() {
+    var _this = this;
     var options = this.options,
       viewer = this.viewer,
       canvas = this.canvas;
     var document = this.element.ownerDocument;
     addListener(viewer, EVENT_CLICK, this.onClick = this.click.bind(this));
     addListener(viewer, EVENT_DRAG_START, this.onDragStart = this.dragstart.bind(this));
-    addListener(canvas, EVENT_POINTER_DOWN, this.onPointerDown = this.pointerdown.bind(this));
+    // Use the new event binding to replace the original binding.
+    addListener(canvas, EVENT_POINTER_DOWN, function (event) {
+      _this.lastPointerPosition = {
+        x: event.pageX,
+        y: event.pageY
+      };
+      // Then call the original event handler function.
+      if (_this.pointerdown) {
+        _this.pointerdown(event);
+      }
+    });
     addListener(document, EVENT_POINTER_MOVE, this.onPointerMove = this.pointermove.bind(this));
     addListener(document, EVENT_POINTER_UP, this.onPointerUp = this.pointerup.bind(this));
     addListener(document, EVENT_KEY_DOWN, this.onKeyDown = this.keydown.bind(this));
@@ -2237,6 +2248,16 @@ var methods = {
       naturalWidth = imageData.naturalWidth,
       naturalHeight = imageData.naturalHeight;
     ratio = Math.max(0, ratio);
+
+    // After determining the zoom ratio, check if a pivot has already been provided. 
+    // If not, and we have the last pointerdown position, use it to set the pivot.
+    if (!pivot && this.lastPointerPosition) {
+      var offset = getOffset(this.viewer);
+      pivot = {
+        x: this.lastPointerPosition.x - offset.left,
+        y: this.lastPointerPosition.y - offset.top
+      };
+    }
     if (isNumber(ratio) && this.viewed && !this.played && (_zoomable || options.zoomable)) {
       if (!_zoomable) {
         var minZoomRatio = Math.max(0.01, options.minZoomRatio);
@@ -2278,15 +2299,15 @@ var methods = {
       }
       this.zooming = true;
       if (_originalEvent) {
-        var offset = getOffset(this.viewer);
+        var _offset = getOffset(this.viewer);
         var center = pointers && Object.keys(pointers).length > 0 ? getPointersCenter(pointers) : {
           pageX: _originalEvent.pageX,
           pageY: _originalEvent.pageY
         };
 
         // Zoom from the triggering point of the event
-        imageData.x -= offsetWidth * ((center.pageX - offset.left - x) / width);
-        imageData.y -= offsetHeight * ((center.pageY - offset.top - y) / height);
+        imageData.x -= offsetWidth * ((center.pageX - _offset.left - x) / width);
+        imageData.y -= offsetHeight * ((center.pageY - _offset.top - y) / height);
       } else if (isPlainObject(pivot) && isNumber(pivot.x) && isNumber(pivot.y)) {
         imageData.x -= offsetWidth * ((pivot.x - x) / width);
         imageData.y -= offsetHeight * ((pivot.y - y) / height);
@@ -2964,6 +2985,7 @@ var Viewer = /*#__PURE__*/function () {
     this.zooming = false;
     this.pointerMoved = false;
     this.id = getUniqueID();
+    this.lastPointerPosition = null; // Initialize the lastPointerPosition attribute
     this.init();
   }
   _createClass(Viewer, [{
diff --git a/dist/viewer.js b/dist/viewer.js
index a799c117..9e585afe 100644
--- a/dist/viewer.js
+++ b/dist/viewer.js
@@ -5,7 +5,7 @@
  * Copyright 2015-present Chen Fengyuan
  * Released under the MIT license
  *
- * Date: 2023-09-17T03:16:38.052Z
+ * Date: 2023-10-20T00:16:37.130Z
  */
 
 (function (global, factory) {
@@ -1203,13 +1203,24 @@
 
   var events = {
     bind: function bind() {
+      var _this = this;
       var options = this.options,
         viewer = this.viewer,
         canvas = this.canvas;
       var document = this.element.ownerDocument;
       addListener(viewer, EVENT_CLICK, this.onClick = this.click.bind(this));
       addListener(viewer, EVENT_DRAG_START, this.onDragStart = this.dragstart.bind(this));
-      addListener(canvas, EVENT_POINTER_DOWN, this.onPointerDown = this.pointerdown.bind(this));
+      // Use the new event binding to replace the original binding.
+      addListener(canvas, EVENT_POINTER_DOWN, function (event) {
+        _this.lastPointerPosition = {
+          x: event.pageX,
+          y: event.pageY
+        };
+        // Then call the original event handler function.
+        if (_this.pointerdown) {
+          _this.pointerdown(event);
+        }
+      });
       addListener(document, EVENT_POINTER_MOVE, this.onPointerMove = this.pointermove.bind(this));
       addListener(document, EVENT_POINTER_UP, this.onPointerUp = this.pointerup.bind(this));
       addListener(document, EVENT_KEY_DOWN, this.onKeyDown = this.keydown.bind(this));
@@ -2243,6 +2254,16 @@
         naturalWidth = imageData.naturalWidth,
         naturalHeight = imageData.naturalHeight;
       ratio = Math.max(0, ratio);
+
+      // After determining the zoom ratio, check if a pivot has already been provided. 
+      // If not, and we have the last pointerdown position, use it to set the pivot.
+      if (!pivot && this.lastPointerPosition) {
+        var offset = getOffset(this.viewer);
+        pivot = {
+          x: this.lastPointerPosition.x - offset.left,
+          y: this.lastPointerPosition.y - offset.top
+        };
+      }
       if (isNumber(ratio) && this.viewed && !this.played && (_zoomable || options.zoomable)) {
         if (!_zoomable) {
           var minZoomRatio = Math.max(0.01, options.minZoomRatio);
@@ -2284,15 +2305,15 @@
         }
         this.zooming = true;
         if (_originalEvent) {
-          var offset = getOffset(this.viewer);
+          var _offset = getOffset(this.viewer);
           var center = pointers && Object.keys(pointers).length > 0 ? getPointersCenter(pointers) : {
             pageX: _originalEvent.pageX,
             pageY: _originalEvent.pageY
           };
 
           // Zoom from the triggering point of the event
-          imageData.x -= offsetWidth * ((center.pageX - offset.left - x) / width);
-          imageData.y -= offsetHeight * ((center.pageY - offset.top - y) / height);
+          imageData.x -= offsetWidth * ((center.pageX - _offset.left - x) / width);
+          imageData.y -= offsetHeight * ((center.pageY - _offset.top - y) / height);
         } else if (isPlainObject(pivot) && isNumber(pivot.x) && isNumber(pivot.y)) {
           imageData.x -= offsetWidth * ((pivot.x - x) / width);
           imageData.y -= offsetHeight * ((pivot.y - y) / height);
@@ -2970,6 +2991,7 @@
       this.zooming = false;
       this.pointerMoved = false;
       this.id = getUniqueID();
+      this.lastPointerPosition = null; // Initialize the lastPointerPosition attribute
       this.init();
     }
     _createClass(Viewer, [{
diff --git a/docs/js/viewer.js b/docs/js/viewer.js
index a799c117..9e585afe 100644
--- a/docs/js/viewer.js
+++ b/docs/js/viewer.js
@@ -5,7 +5,7 @@
  * Copyright 2015-present Chen Fengyuan
  * Released under the MIT license
  *
- * Date: 2023-09-17T03:16:38.052Z
+ * Date: 2023-10-20T00:16:37.130Z
  */
 
 (function (global, factory) {
@@ -1203,13 +1203,24 @@
 
   var events = {
     bind: function bind() {
+      var _this = this;
       var options = this.options,
         viewer = this.viewer,
         canvas = this.canvas;
       var document = this.element.ownerDocument;
       addListener(viewer, EVENT_CLICK, this.onClick = this.click.bind(this));
       addListener(viewer, EVENT_DRAG_START, this.onDragStart = this.dragstart.bind(this));
-      addListener(canvas, EVENT_POINTER_DOWN, this.onPointerDown = this.pointerdown.bind(this));
+      // Use the new event binding to replace the original binding.
+      addListener(canvas, EVENT_POINTER_DOWN, function (event) {
+        _this.lastPointerPosition = {
+          x: event.pageX,
+          y: event.pageY
+        };
+        // Then call the original event handler function.
+        if (_this.pointerdown) {
+          _this.pointerdown(event);
+        }
+      });
       addListener(document, EVENT_POINTER_MOVE, this.onPointerMove = this.pointermove.bind(this));
       addListener(document, EVENT_POINTER_UP, this.onPointerUp = this.pointerup.bind(this));
       addListener(document, EVENT_KEY_DOWN, this.onKeyDown = this.keydown.bind(this));
@@ -2243,6 +2254,16 @@
         naturalWidth = imageData.naturalWidth,
         naturalHeight = imageData.naturalHeight;
       ratio = Math.max(0, ratio);
+
+      // After determining the zoom ratio, check if a pivot has already been provided. 
+      // If not, and we have the last pointerdown position, use it to set the pivot.
+      if (!pivot && this.lastPointerPosition) {
+        var offset = getOffset(this.viewer);
+        pivot = {
+          x: this.lastPointerPosition.x - offset.left,
+          y: this.lastPointerPosition.y - offset.top
+        };
+      }
       if (isNumber(ratio) && this.viewed && !this.played && (_zoomable || options.zoomable)) {
         if (!_zoomable) {
           var minZoomRatio = Math.max(0.01, options.minZoomRatio);
@@ -2284,15 +2305,15 @@
         }
         this.zooming = true;
         if (_originalEvent) {
-          var offset = getOffset(this.viewer);
+          var _offset = getOffset(this.viewer);
           var center = pointers && Object.keys(pointers).length > 0 ? getPointersCenter(pointers) : {
             pageX: _originalEvent.pageX,
             pageY: _originalEvent.pageY
           };
 
           // Zoom from the triggering point of the event
-          imageData.x -= offsetWidth * ((center.pageX - offset.left - x) / width);
-          imageData.y -= offsetHeight * ((center.pageY - offset.top - y) / height);
+          imageData.x -= offsetWidth * ((center.pageX - _offset.left - x) / width);
+          imageData.y -= offsetHeight * ((center.pageY - _offset.top - y) / height);
         } else if (isPlainObject(pivot) && isNumber(pivot.x) && isNumber(pivot.y)) {
           imageData.x -= offsetWidth * ((pivot.x - x) / width);
           imageData.y -= offsetHeight * ((pivot.y - y) / height);
@@ -2970,6 +2991,7 @@
       this.zooming = false;
       this.pointerMoved = false;
       this.id = getUniqueID();
+      this.lastPointerPosition = null; // Initialize the lastPointerPosition attribute
       this.init();
     }
     _createClass(Viewer, [{
diff --git a/src/js/events.js b/src/js/events.js
index 32821ffb..ebce2446 100644
--- a/src/js/events.js
+++ b/src/js/events.js
@@ -21,14 +21,17 @@ export default {
 
     addListener(viewer, EVENT_CLICK, (this.onClick = this.click.bind(this)));
     addListener(viewer, EVENT_DRAG_START, (this.onDragStart = this.dragstart.bind(this)));
-    // addListener(canvas, EVENT_POINTER_DOWN, (this.onPointerDown = this.pointerdown.bind(this)));
-    addListener(canvas, EVENT_POINTER_DOWN, (this.onPointerDown = function (event) {
+    // Use the new event binding to replace the original binding.
+    addListener(canvas, EVENT_POINTER_DOWN, (event) => {
       this.lastPointerPosition = {
         x: event.pageX,
         y: event.pageY
       };
-      this.pointerdown.bind(this)(event);
-    }));    
+      // Then call the original event handler function.
+      if (this.pointerdown) {
+        this.pointerdown(event);
+      }
+    });
     addListener(document, EVENT_POINTER_MOVE, (this.onPointerMove = this.pointermove.bind(this)));
     addListener(document, EVENT_POINTER_UP, (this.onPointerUp = this.pointerup.bind(this)));
     addListener(document, EVENT_KEY_DOWN, (this.onKeyDown = this.keydown.bind(this)));
diff --git a/src/js/methods.js b/src/js/methods.js
index ca22ba7c..370184a6 100644
--- a/src/js/methods.js
+++ b/src/js/methods.js
@@ -717,7 +717,8 @@ export default {
 
     ratio = Math.max(0, ratio);
 
-    // 在确定了缩放比率后，我们检查是否已经提供了一个pivot。如果没有，并且我们有最后一个pointerdown的位置，我们使用它来设置pivot。
+    // After determining the zoom ratio, check if a pivot has already been provided. 
+    // If not, and we have the last pointerdown position, use it to set the pivot.
     if (!pivot && this.lastPointerPosition) {
       const offset = getOffset(this.viewer);
       pivot = {
diff --git a/src/js/viewer.js b/src/js/viewer.js
index e12d4661..542a3abe 100644
--- a/src/js/viewer.js
+++ b/src/js/viewer.js
@@ -86,7 +86,7 @@ class Viewer {
     this.zooming = false;
     this.pointerMoved = false;
     this.id = getUniqueID();
-    this.lastPointerPosition = null;  // 初始化 lastPointerPosition 属性
+    this.lastPointerPosition = null;  // Initialize the lastPointerPosition attribute
     this.init();
   }