Feature:1.add onImagesClick function.(if you wish for only click the images without move event to close the Viewer)

README.md

@@ -80,6 +80,7 @@ I'm sorry, ssr is not currently supported in `3.x`, it will be fixed in `4.0`.
 | rotatable    | boolean      | true    | whether to show 'rotate' button | false |
 | scalable     | boolean      | true    | whether to show 'scale' button | false |
 | onMaskClick  | (e) => void  |   -     | callback function when mask is clicked | false |
+| onImagesClick  | (e) => void  |   -     | callback function when over images is clicked but not move | false |
 | downloadable     | boolean      |  false  | whether to show 'download' | false |
 | noClose      | boolean      |  false  | to not render close button | false |
 | noNavbar     | boolean      |  false  | to not render the navbar | false |

src/ViewerCanvas.tsx

@@ -20,6 +20,7 @@ export interface ViewerCanvasProps {
   drag: boolean;
   container: HTMLElement;
   onCanvasMouseDown: (e: React.MouseEvent<HTMLDivElement>) => void;
+  onImagesMouseDown: (e: React.MouseEvent<HTMLDivElement>) => void;
 }
 
 export interface ViewerCanvasState {
@@ -30,6 +31,7 @@ export interface ViewerCanvasState {
 
 export default function ViewerCanvas(props: ViewerCanvasProps) {
   const isMouseDown = React.useRef(false);
+  const isMouseMove = React.useRef(false);
   const prePosition = React.useRef({
     x: 0,
     y: 0,
@@ -107,11 +109,16 @@ export default function ViewerCanvas(props: ViewerCanvasProps) {
         x: e.clientX,
         y: e.clientY,
       });
+      isMouseMove.current = true
     }
   };
 
   function handleMouseUp(e) {
     isMouseDown.current = false;
+    if(!isMouseMove.current && props.onImagesMouseDown) {
+      props.onImagesMouseDown()
+    }
+    isMouseMove.current = false
   }
 
   function bindWindowResizeEvent(remove?: boolean) {

src/ViewerCore.tsx

@@ -58,6 +58,7 @@ export default (props: ViewerProps) => {
     rotatable = true,
     scalable = true,
     onMaskClick = noop,
+    onImagesClick = noop,
     changeable = true,
     customToolbar = (toolbars) => toolbars,
     zoomSpeed = .05,
@@ -461,6 +462,10 @@ export default (props: ViewerProps) => {
     onMaskClick(e);
   }
 
+  function handleImagesMouseDown(e) {
+    onImagesClick(e);
+  }
+
   function bindEvent(remove: boolean = false) {
     let funcName = 'addEventListener';
     if (remove) {
@@ -684,6 +689,7 @@ export default (props: ViewerProps) => {
         drag={drag}
         container={props.container}
         onCanvasMouseDown={handleCanvasMouseDown}
+        onImagesMouseDown={handleImagesMouseDown}
       />
       {props.noFooter || (
         <div className={`${prefixCls}-footer`} style={{ zIndex: zIndex + 5 }}>

src/ViewerProps.ts

@@ -48,6 +48,8 @@ interface ViewerProps {
   scalable?: boolean;
   /** callback function when mask is clicked */
   onMaskClick?: (e: React.MouseEvent<HTMLDivElement>) => void;
+  /** callback function when over images is clicked but not move */
+  onImagesClick?: (e: React.MouseEvent<HTMLDivElement>) => void;
   /** 是否显示下载按钮 */
   downloadable?: boolean;
   /** 图片是否可循环 */