javascript - 怎么处理click和mousedown-Soal Jawab Rangkaian PHP Cina

我要实现的功能是点击图片的某处给这个地方加个标签，
这个标签是可以拖动的，但是拖动后，点击事件就没用了
因为我在$(document).mouseup把所有的$(document)都off了
如果不off的话，拖动会有问题，我要怎么判断click时取消off,mousedown添加off?
<!DOCTYPE html>
<html>
  <head>
    <title>TODO supply a title</title>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width">
    <script src="http://code.jquery.com/jquery-1.8.0.min.js"></script>  
  </head>
  <style type="text/css">
     .locSize{margin: 100px auto;border: 1px solid red;position: relative;width:640px;height:640px;}
     .locSize img{background-size:cover;}
     .locSize p{position: absolute;}
     .locSize p span{width:6px;height:6px;border-radius:50% 50%;background: #000;margin-top: -3px;margin-left: -3px;display: block;}
     .locSize p h3{padding: 0;margin: 0;line-height: 25px;}
  </style>
  <body>
      <p class="locSize">
          <img src="http://img1.3lian.com/img013/v1/83/d/1.jpg" width="640" height="640"/>
      </p>
      
      <script type="text/javascript">
        
        function objPicturebox(){
             this.dom_img=$(".locSize img");
             this.disX=0;
             this.disY=0;
             this.imgW=0;
             this.imgH=0;
             this.imgT=0;
             this.imgL=0;
             this.locationX=0;
             this.locationY=0;
        }
        objPicturebox.prototype={
              objPicturebox:constructor,
              
              init:function(){
                  this.locationXY();
              },
              
              locationXY:function(){
                  var _this=this;
                    var index=0;
                    $(document).on("click",function(ev){
                            var ev=ev||event;
                                    _this.imgW = _this.dom_img.width(),
                                    _this.imgH = _this.dom_img.height(),
                                    _this.imgT = _this.dom_img.offset().top,
                                    _this.imgL = _this.dom_img.offset().left;
                                    _this.disY = ev.clientY - _this.imgT;
                                    _this.disX = ev.clientX - _this.imgL;
                            if(ev.clientX>(_this.imgW+_this.imgL) || ev.clientX<_this.imgL || ev.clientY>(_this.imgH+_this.imgT) || ev.clientY<_this.imgT){
                                    return;
                            }else{
                                    _this.locationX=(_this.disX/_this.imgW)*100;
                                    _this.locationY=(_this.disY/_this.imgH)*100;
                                    $(".locSize").append("<p index="+(index++)+" style='left:"+_this.locationX+"%;top:"+_this.locationY+"%'><span></span><h3>标签1</h3></p>");
                                    
                                    _this.drag(index);    
                            }
                    }); 
              },
              drag:function(index){
                  var _this=this;
                  var dom=$(".locSize p:nth-of-type("+index+")");
                  var disX=0;
                 var disY=0;
                  dom.mousedown(function(ev){
                           var ev=ev||event;
                           var _this=this;
                           disX=ev.clientX-dom.get(0).offsetLeft;
                  disY=ev.clientY-dom.get(0).offsetTop;
                         $(document).mousemove(function(ev){
                             _this.mark=false;
                             var ev=ev||event;
                               _this.locationX=ev.clientX-disX;
                               _this.locationY=ev.clientY-disY;              
                             dom.css("left",ev.clientX-disX+"px");
                             dom.css("top",ev.clientY-disY+"px"); 
                     })
                     $(document).mouseup(function(){
                               $(document).off();
                     })
                     return false;
                  })
              }    
        }
        var obj=new objPicturebox();
        obj.init();

      </script>
    </body>
</html>