拖动时防止对象链接工作

Question

我的网站上有一个可拖动的图像，如果单击它，我想链接到另一个页面。麻烦的是，如果它被拖动，我不希望它被“点击”，只有当它被点击而不被拖动时。所以大概我需要取消链接onmouseout，不是吗？有人可以帮忙吗？

脚本：

var dragobject={
z: 0, x: 0, y: 0, offsetx : null, offsety : null, targetobj : null, dragapproved : 0,
initialize:function(){
document.onmousedown=this.drag
document.onmouseup=function(){this.dragapproved=0}
},
drag:function(e){
var evtobj=window.event? window.event : e
this.targetobj=window.event? event.srcElement : e.target
if (this.targetobj.className=="drag"){
this.dragapproved=1
if (isNaN(parseInt(this.targetobj.style.left))){this.targetobj.style.left=0}
if (isNaN(parseInt(this.targetobj.style.top))){this.targetobj.style.top=0}
this.offsetx=parseInt(this.targetobj.style.left)
this.offsety=parseInt(this.targetobj.style.top)
this.x=evtobj.clientX
this.y=evtobj.clientY
if (evtobj.preventDefault)
evtobj.preventDefault()
document.onmousemove=dragobject.moveit
}
},
moveit:function(e){
var evtobj=window.event? window.event : e
if (this.dragapproved==1){
this.targetobj.style.left=this.offsetx+evtobj.clientX-this.x+"px"
this.targetobj.style.top=this.offsety+evtobj.clientY-this.y+"px"
return false
}
}
}

dragobject.initialize()

图片：

<a href="#"><img src="image1" class="drag" STYLE="position:relative; TOP:-216px; LEFT:433px; width:60px"></a>

Answer 1

你可以用 div 做一些边框，然后用它来覆盖你的代码：

<style type="text/css">
    #cover{
      height:sze px;/*enter a bigger height and width than image instead of sze*/
      width:sze px;
    } 
</style>
<script type="text/javascript">
var dragobject={
z: 0, x: 0, y: 0, offsetx : null, offsety : null, targetobj : null, dragapproved : 0,
initialize:function(){
document.onmousedown=this.drag
document.onmouseup=function(){this.dragapproved=0}
},
drag:function(e){
var evtobj=window.event? window.event : e
this.targetobj=window.event? event.srcElement : e.target
if (this.targetobj.className=="drag"){
this.dragapproved=1
if (isNaN(parseInt(this.targetobj.style.left))){this.targetobj.style.left=0}
if (isNaN(parseInt(this.targetobj.style.top))){this.targetobj.style.top=0}
this.offsetx=parseInt(this.targetobj.style.left)
this.offsety=parseInt(this.targetobj.style.top)
this.x=evtobj.clientX
this.y=evtobj.clientY
if (evtobj.preventDefault)
evtobj.preventDefault()
document.onmousemove=dragobject.moveit
}
},
moveit:function(e){
var evtobj=window.event? window.event : e
if (this.dragapproved==1){
this.targetobj.style.left=this.offsetx+evtobj.clientX-this.x+"px"
this.targetobj.style.top=this.offsety+evtobj.clientY-this.y+"px"
return false
}
}
}
dragobject.initialize()
</script>
<div id="cover" class="drag" style="position:relative; TOP:-216px; LEFT:433px; width:60px"><a href="#"><img id="myimg" src="image1"></a></div>

或者你可以用js代码改变css：

<script>
function coverage(){
        var img=document.getElementByid('myimg'),
            cov=document.getElementByid('cover'),
            imgh=img.offsetHeight(),
            imgw=img.offsetWidth();
        cov.style.cssText="height:"+(imgh+50)+";width:"+(imgw+50)+";padding:3px;";
     }
     window.onload=coverage;
</script>