Cloud Zoom和jQuery mouseleave()

Question

我正在使用Cloud Zoom创建一个用于查看产品的缩放功能，我想激活鼠标点击时的缩放(这很好用)，但是当我尝试添加关闭鼠标左键缩放的功能时，有这些“小故障”，我似乎不能考虑-如果我离开初始化区域的容器非常慢，我可以触发关闭脚本。但是如果我相当快地将鼠标拖到页面的另一部分，则不会发生任何反应。

HTML

<div id="product-image">
  <a href="images/product-sample-zoom.jpg" class="cloud-zoom" rel="adjustX: 10, adjustY: -4"><img src="images/product-sample.jpg"></a>
</div>

JS

var $zoomInit = false;
$('.cloud-zoom').click(function(e) {
  $('.cloud-zoom').CloudZoom({ showTitle: false });
  $zoomInit = true;
  e.preventDefault();
});
$('#product-image').mouseout(function() {
  if ($zoomInit == true) {
    $('.cloud-zoom').data('zoom').destroy();
    $zoomInit = false;
  }
});

Answer 1

我也有同样的问题。

在cloud-zoom.1.0.2.min.js中查找此函数：

(如果缩小了，只需搜索"mouseleave"，只有一个函数。)

$mouseTrap.bind('mouseleave',this,function(event){
    clearTimeout(controlTimer);
    if(lens){
        lens.fadeOut(299)
    }
    if($tint){
        $tint.fadeOut(299)
    }if(softFocus){
        softFocus.fadeOut(299)
    }
    zoomDiv.fadeOut(300,
        function(){
            ctx.fadedOut()
        });
    return false
});

返回false似乎是个问题。删除它或使用"event.preventDefault();“可以起作用。