(纯粹为了便于自己复习记忆!欢迎批评指正!)
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<div style="height:100px;width:100px;background-color: deepskyblue;position: absolute;left: 0px;top: 0px;
border-radius: 50%;overflow: hidden;">
<a href="https://www.baidu.com" target="_blank" style="display:block;height:100%;width: 100%;border: solid 8px pink;
box-sizing: border-box;border-radius: 50%;text-align: center;line-height: 80px;text-decoration: none;font-size: 30px;
font-weight: bold;">baidu</a>
</div>
</body>
<!--<script type="text/javascript" src="js/我的库.js"></script>-->
<script>
var div = document.getElementsByTagName('div')[0];
var a = div.getElementsByTagName('a')[0];
move(div, a);
// 封装的运动方法
function move(elem, a) {
addEvent(elem, 'mousedown', go); //给对象加上一个按压事件
function go(e) {
var event = e || window.event;//兼容IE
var disX, disY;//鼠标距离元素周围的距离
var firstTime = 0;//down的的时间
var lastTime = 0;//up的时间
firstTime = new Date().getTime();//记录按下去的时间
disX = e.pageX - parseInt(elem.style.left); //让单击位置的出生点和div一致
disY = e.pageY - parseInt(elem.style.top);
addEvent(document, 'mousemove', moving); //用document而不用elem是因为防止速度太快来不及监听就移出了elem范围
addEvent(document, 'mouseup', stopUp); //该兼容方法封装在第57行
stopBubble(event); //不允许事件冒泡69行
cancelHandler(event); //阻止默认事件77行
function moving(e) {
var event = e || window.event;
elem.style.left = event.pageX - disX + "px";
elem.style.top = event.pageY - disY + "px";
}
function stopUp() { //抬起时清除多余的监听事件等
lastTime = new Date().getTime();//监听抬起的时间
if(lastTime - firstTime > 250) {//如果一个单击的生物行为时间大于这个时间,则取消跳转
a.onclick = function() {
return false;
}
} else {
a.onclick = function() {
return true;
}
}
document.removeEventListener('mousemove', moving, false);//移除事件
document.removeEventListener('mouseup', stopUp, false);
}
}
}
//封装一个事件监听方法,解决IE10以下特有监听类型的问题和老版IE监听方法中this指向window的问题
function addEvent(elem,type,handle){//参数代表要操作的DOM元素,操作类型和执行函数
if(elem.addEventListener){ //兼容:firefox、chrome、IE、safari、opera;不兼容IE7、IE8
elem.addEventListener(type,handle,false);//false为冒泡事件,true为捕获事件!
}else if(elem.attachEvent){//兼容:IE7、IE8;不兼容firefox、chrome、IE9、IE10、IE11、safari、opera
elem.attachEvent(‘on’ + type,function(){
handle.call(elem);//解决IE中this指向window的问题
})
}else{
elem[‘on’ + type] = handle;//上述都没用就用on的原始方法绑定
}
}
//封装与IE兼容的修改事件冒泡的方法
function stopBubble(event){
if(event.stopPropagation){ //不支持IE浏览器!
event.stopPropagation();
}else{
event.cancelBubble = true;//针对IE兼容的方法
}
}
//封装阻止默认事件的兼容IE的方法
function cancelHandler(event){
if(event.preventDefault){
event.preventDefault();
}else{
event.returnValue = false;
}
}