怎么处理click和mousedown_问答-阿里云开发者社区

我要实现的功能是点击图片的某处给这个地方加个标签，
这个标签是可以拖动的，但是拖动后，点击事件就没用了
因为我在$(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 div{position: absolute;}
     .locSize div span{width:6px;height:6px;border-radius:50% 50%;background: #000;margin-top: -3px;margin-left: -3px;display: block;}
     .locSize div h3{padding: 0;margin: 0;line-height: 25px;}
  </style>
  <body>
      <div class="locSize">
          <img src="http://img1.3lian.com/img013/v1/83/d/1.jpg" width="640" height="640"/>
      </div>
      
      <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("<div index="+(index++)+" style='left:"+_this.locationX+"%;top:"+_this.locationY+"%'><span></span><h3>标签1</h3></div>");
                                    
                                    _this.drag(index);    
                            }
                    }); 
              },
              drag:function(index){
                  var _this=this;
                  var dom=$(".locSize div: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>

<!DOCTYPE html> <html> <head> <title>TODO supply a title</title> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width"> <script src="http://cdn.bootcss.com/jquery/2.1.4/jquery.min.js"></script> </head> <body> <h3>在页面中单击测试效果</h3> <script type="text/javascript"> (function(){ var doc = $(document); var x,//记录x坐标 y,//记录y坐标 t,//记录时间 isOff = true;//记录事件是否被off了 doc.on('mousedown', function(e){ if(isOff){//mousedown的时候, 如果之前的事件被 off 了, 则再绑定一次 doc.on('click.test', function(){ alert('click!!!'); }); } t = new Date().getTime();//记录当前时间 x = e.clientX;//记录鼠标按下时的坐标 y = e.clientY; }).on('mouseup', function(e){ var tt = new Date().getTime(), xx = e.clientX; xy = e.clientY; isOff = (tt - t > 150) //mouseup 与 mousedown 事件触发相差超过150毫秒, 则不认为是click || (xx - x) //或者mousedown与mouseup事件触发时, 鼠标的位置发生过改动 || (xy - y) //或者mousedown与mouseup事件触发时, 鼠标的位置发生过改动 if(isOff){ doc.off('click.test'); //停用 click 事件 } }); })(); </script> </body>

怎么处理click和mousedown

相关文章

相关电子书