我要实现的功能是点击图片的某处给这个地方加个标签，
这个标签是可以拖动的，但是拖动后，点击事件就没用了
因为我在$(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>
写回答
记录 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>版权声明：本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。
