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

开发者社区> 问答> 正文

怎么处理click和mousedown

小旋风柴进 2016-05-30 10:02:49 1545

我要实现的功能是点击图片的某处给这个地方加个标签,
这个标签是可以拖动的,但是拖动后,点击事件就没用了
因为我在$(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>
JavaScript
分享到
取消 提交回答
全部回答(1)
  • 小旋风柴进
    2019-07-17 19:19:07

    记录 mousedown 时, 鼠标的位置, 然后在 mouseup 里面再取一次鼠标位置.
    如果位置相同, 则认为是 click, 则此时不 off 应该就可以了.

    基于楼主在评论中提出的新问题, 现提供DEMO给楼主.
    希望能解决你的问题:

    <!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>
    0 0
开发与运维
使用钉钉扫一扫加入圈子
+ 订阅

集结各类场景实战经验,助你开发运维畅行无忧

推荐文章
相似问题
推荐课程