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>

Php8, saya datang juga

Ketahui reka letak tapak web dalam masa 30 minit

Tutorial Video Permulaan Shangguan Oracle kepada Mahir

Baris pertama kod UNI-APP anda

Berkibar dari awal ke pelancaran apl

Tutorial Video Linux Baharu Brother Lian

Tutorial Video AXURE 9 (Sesuai untuk UI Reka Bentuk Produk Interaktif Pengurus Produk)

Tutorial Video PS Kemahiran Asas Sifar

Tutorial video UI 16 hari untuk anda bermula

Tutorial Video Teknik PS dan Teknik Menghiris

Tutorial Video Pembinaan Persekitaran Awan Alibaba dan Pelancaran Projek

Gambaran Keseluruhan Rangkaian Komputer - Pengetahuan Asas yang Perlu Dikuasai Pengaturcara

Tutorial Penting untuk Pengaturcara - Penjelasan Protokol HTTP

Tutorial Video Websocket