Javascript 有没有办法在图像地图上启用收缩缩放？

我在通过hammer.js实现收缩缩放和图像地图时遇到问题，在我输入收缩缩放后，图像可以放大和拖动，但无法单击我之前编写的区域地图。有什么解决办法吗

HTML

<script src="js/jquery.js" type="text/javascript"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
<script src="hammer.min.js" type="text/javascript"></script>
<script src="hammer.js" type="text/javascript"></script>
<script src="hammer.fakemultitouch.js" type="text/javascript"></script>
<script src="hammer.showtouches.js" type="text/javascript"></script>

<div class="content">
        <div id="pinchzoom">
            <img src="images/map.jpg" width="529" height="300" id="rect" alt="Zoo" usemap="#zoomap">
            <map name="zoomap">
                <area shape="circle" coords="200,200,50" href="javascript:openPopup3" alt="NYTimes" >
            </map>
        </div>

Javascript

var hammertime = Hammer(document.getElementById('pinchzoom'), {
    transform_always_block: true,
    transform_min_scale: 1,
    drag_block_horizontal: false,
    drag_block_vertical: false,
    drag_min_distance: 0
});

var rect = document.getElementById('rect');



var posX=0, posY=0,
    scale=1, last_scale,
    last_posX=0, last_posY=0,
    max_pos_x=0, max_pos_y=0;

hammertime.on('touch drag transform dragend', function(ev) {
    switch(ev.type) {
        case 'touch':
            last_scale = scale;
            break;
        case 'drag':
            if(scale != 1){
                posX = saved_posX + ev.gesture.deltaX;
                posY = saved_posY + ev.gesture.deltaY;
                if(posX > max_pos_x){
                    posX = max_pos_x;
                }
                if(posX < -max_pos_x){
                    posX = -max_pos_x;
                }
                if(posY > max_pos_y){
                    posY = max_pos_y;
                }
                if(posY < -max_pos_y){
                    posY = -max_pos_y;
                }
            }else{
                posX = 0;
                posY = 0;
                saved_posX = 0;
                saved_posY = 0;
            }
            break;

        case 'transform':
            scale = Math.max(1, Math.min(last_scale * ev.gesture.scale, 10));
            max_pos_x = Math.ceil((scale - 1) * rect.clientWidth / 2);
            max_pos_y = Math.ceil((scale - 1) * rect.clientHeight / 2);
            if(posX > max_pos_x){
                posX = max_pos_x;
            }
            if(posX < -max_pos_x){
                posX = -max_pos_x;
            }
           if(posY > max_pos_y){
                posY = max_pos_y;
            }
           if(posY < -max_pos_y){
                posY = -max_pos_y;
            }
            break;
        case 'dragend':
            last_posX = posX < max_pos_x ? posX: max_pos_x;
            last_posY = posY < max_pos_y ? posY: max_pos_y;
            break;
    }

    // transform!
   var transform =
        "translate3d(0, 0, 0) " +
        "scale3d(1, 1, 0) ";
    if(scale != 1){
       transform =
            "translate3d("+posX+"px,"+posY+"px, 0) " +
            "scale3d("+scale+","+scale+", 0) ";
    }

    rect.style.transform = transform;
    rect.style.oTransform = transform;
    rect.style.msTransform = transform;
    rect.style.mozTransform = transform;
    rect.style.webkitTransform = transform;

});

var hammertime=Hammer（document.getElementById（'pinchzoom'）{
变换\u始终\u块：真，
变换最小比例：1，
水平拖动块：false，
拖动块垂直：false，
拖动最小距离：0
});
var rect=document.getElementById（'rect'）；
变量posX=0，posY=0，
刻度=1，最后一个刻度，
last_posX=0，last_posY=0，
最大位置x=0，最大位置y=0；
hammertime.on（'触摸拖动变换拖动'，功能（ev）{
开关（电动型）{
案例“接触”：
最后一个刻度=刻度；
打破
“拖动”案例：
如果（比例！=1）{
posX=保存的\u posX+ev.signature.deltaX；
posY=保存的_posY+ev.signature.deltaY；
如果（位置x>最大位置x）{
posX=最大位置x；
}
如果（位置x<-最大位置x）{
posX=-max_pos_x；
}
如果（位置>最大位置）{
posY=最大位置y；
}
如果（位置<-最大位置）{
posY=-max_posu_y；
}
}否则{
posX=0；
posY=0；
保存的_posX=0；
保存的位置=0；
}
打破
“转换”案例：
scale=Math.max（1，Math.min（最后一个刻度*ev.signature.scale，10））；
max_pos_x=数学单元（（比例-1）*rect.clientWidth/2）；
max_pos_y=数学单元（（比例-1）*rect.clientHeight/2）；
如果（位置x>最大位置x）{
posX=最大位置x；
}
如果（位置x<-最大位置x）{
posX=-max_pos_x；
}
如果（位置>最大位置）{
posY=最大位置y；
}
如果（位置<-最大位置）{
posY=-max_posu_y；
}
打破
案例“dragend”：
last_posX=posX

正确缩进代码并将HTML和javascript分开，以便代码可以正确突出显示感谢您的修复！