smartJQueryZoom(smartZoom) 存在的兼容性BUG，以及解決方法

smartJQueryZoom 是一個很好用的庫。

它基於jQuery，可以對某個元素（比如 img）進行渲染，渲染之后可以放大這個區域，在做圖片瀏覽時很好用。

 

但它有一個兼容性BUG：

當瀏覽器不是chrome（比如safari）時，放大倍率會出現問題：滾輪滾一下，就直接到了最大倍率。

 

為了修復這個BUG，我看了一下這個庫的源碼。

// listening mouse and touch events
            if(settings.touchEnabled == true)
                targetElement.bind('touchstart.smartZoom', touchStartHandler);
            if(settings.mouseEnabled == true){
                if(settings.mouseMoveEnabled == true)
                    targetElement.bind('mousedown.smartZoom', mouseDownHandler);
                if(settings.scrollEnabled == true){
                    containerDiv.bind('mousewheel.smartZoom', mouseWheelHandler);
                    containerDiv.bind( 'mousewheel.smartZoom DOMMouseScroll.smartZoom', containerMouseWheelHander);
                }
                if(settings.dblClickEnabled == true && settings.zoomOnSimpleClick == false)
                    containerDiv.bind('dblclick.smartZoom', mouseDblClickHandler);
            }
               document.ondragstart = function () { return false; }; // allow to remove browser default drag behaviour
            if(settings.adjustOnResize == true)
                $(window).bind('resize.smartZoom', windowResizeEventHandler); // call "adjustToContainer" on resize

            if(settings.initCallback != null) // call callback function after plugin initialization
                settings.initCallback.apply(this, targetElement);
        },

紅色字的方法：

    /**
     * call zoom function on mouse wheel event
      * @param {Object} e : mouse event
      * @param {Object} delta : wheel direction 1 or -1
     */
    function mouseWheelHandler(e, delta){
      var smartData = targetElement.data('smartZoomData');
    
        if(smartData.currentWheelDelta*delta < 0) // if current and delta have != sign we set 0 to go to other direction
            smartData.currentWheelDelta = 0;
        smartData.currentWheelDelta += delta; // increment delta zoom faster when the user use wheel again
        publicMethods.zoom(smartData.mouseWheelDeltaFactor*smartData.currentWheelDelta, {"x":e.pageX, "y":e.pageY}); // 0.15
    }

注意這個注釋：

@param {Object} delta : wheel direction 1 or -1

作者默認 delta 是 1 或者 -1 ，但是其實並不是如此。

比如在safari上，這個值是 40 或者 -40 .

一旦這個值錯了，后面的放大計算就會出錯。

所以修復的方法也很簡單：保證delta永遠是 1 或者 -1 就行了。

     function mouseWheelHandler(e, delta){
      var smartData = targetElement.data('smartZoomData');

      // if delta !== 1
      if (delta > 1) {
        delta = 1
      } else if (delta < -1) {
        delta = -1
      }
      // end
   
        if(smartData.currentWheelDelta*delta < 0) // if current and delta have != sign we set 0 to go to other direction
            smartData.currentWheelDelta = 0;
        smartData.currentWheelDelta += delta; // increment delta zoom faster when the user use wheel again
        publicMethods.zoom(smartData.mouseWheelDeltaFactor*smartData.currentWheelDelta, {"x":e.pageX, "y":e.pageY}); // 0.15
    }

以上。