我的网站上有一个可拖动的图片,如果点击,我想链接到另一个页面。麻烦的是,如果它被拖动,我不希望它被“点击”,只有当它被点击而不是被拖动时。所以我想要取消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>
答案 0 :(得分:0)
您可以使用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>