这个是事件冒泡！和css没啥关系，就是JS的事。
解决方案：
1.event.stopPropagation()
针对你的代码 大概是这样
obj.onmouseup=function(event){XXXXXXX
event.stopPropagation()
}
事件处理过程中，阻止了事件冒泡，但不会阻击默认行为（它就执行了超链接的跳转）
2.return false
obj.onmouseup=function(){XXXXXXX
return false
}
事件处理过程中，阻止了事件冒泡，也阻止了默认行为（比如刚才它就没有执行超链接的跳转）
3.event.preventDefault()
obj.onmouseup=function(event){XXXXXXX
event.preventDefault()
}
在一个对象上触发某类事件（比如单击onclick事件），如果此对象定义了此事件的处理程序，那么此事件就会调用这个处理程序，如果没有定义此事件处理程序或者事件返回true，那么这个事件会向这个对象的父级对象传播，从里到外，直至它被处理（父级对象所有同类事件都将被激活），或者它到达了对象层次的最顶层，即document对象（有些浏览器是window）。
以上部分摘自：网页链接
古老的做法是用settimeout或者setinterval实现循环动画，但是这样就会造成题主说的，在且页面的时候会造成混乱。
因为当页面失去焦点时浏览器不再渲染页面，但是settimeout/setinterval的请求不会停止，队列会一直堆积动画，当页面再次获得焦点时动画队列早已堆积了大量命令，就会导致动画混乱。
现在的做法，笼统地说，是使用requestanimationframe函数，用法和settimeout/setinterval类似，只不过requestanimationframe不接受时间参数,函数的执行频率由浏览器的渲染帧数决定，这就实现了由浏览器决定动画队列，避免了动画混乱。当然也可以使用一些现成的轮播图插件，题主可以自己百度，这里对比举例说明一下settimeout和requestanimationframe的用法。
//用setTimeout实现在控制台循环输出hello worldfunction fun(){
console.log('hello world')
setTimeout(function(){
fun()
},3000)
}
fun()//执行fun函数，就可以每隔3000毫秒递归的输出hello world
//用reqestanimationframe实现在控制台循环输出hello world
function fun(){
console.log('hello world')
requestAnimationFrame(function(){
fun()
})
}
fun()//执行fun函数，就可以每隔3000毫秒递归的输出hello world
//requestAnimationFrame没有时间参数，所以直接使用不能控制间隔
//但我们可以人为的限制执行间隔，方法如下
function fun(last_time){
if(new Date().getTime() - last_time > 3000){
console.log('hello world')
requestAnimationFrame(function(){
fun(new Date().getTime())
})
}else{
requestAnimationFrame(function(){
fun(last_time)
})
}
}
fun(new Date().getTime())
//这样就可以为requestAnimationFrame设置间隔，实现每隔3000毫秒输出hello world
//抱歉我主写c副写python偶尔写javaweb,分号用的有些乱。
