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
    }

以上。