day13事件下
事件冒泡:
从里到外冒泡,当外面有盒子添加点击,里面有按钮按下会自动调用外面盒子的点击
事件捕获:
直接进行捕获处理
阻止事件冒泡:
e.stoppropagation()*
e.cancelBubble=true(兼容ie的写法)
阻止默认行为
e.preventDefault()
e.returnValue=false (可能会被废弃)
return false
拖拽
思路:
1.给移动元素添加mousedown事件,并获取鼠标在元素内的坐标
2.在mousedown的事件添加mousemove事件(给父元素添加),并获取实时的鼠标在页面上的实时位置,在减去鼠标在元素的坐标,并赋值给元素的left和top
3.最后添加弹起事件,并取消mousemove事件
div.onmousedown=function(e){
var x=e.pageX-div.offsetleft;
var y=e.pageY-div.offsettop;
document.onmousemove=function(e){
var targetX=e.pageX-x;
var targetY=e.pageY-y;
div.style.left = targetX + "px";
div.style.top = targetY + "px";
}
document.onmouseup=function(){
document.onmousemove=false;
}
}
区间拖拽
1.给元素添加按下事件 （获取元素的父盒子的位置 在网页上的位置 获取对应的鼠标在元素里面的位
置）
2.在按下事件里面添加移动事件（父元素添加） （获取当前鼠标在父盒子里面的位置 - 对应的鼠标在元
素的位置 设置对应的位置 ）
3.在弹起事件里面取消对应的移动事件以及弹起事件
box.onmousemove = function(e){
e = e || window.event
// var targetX = e.offsetX - currentX
// var targetY = e.offsetY - currentY
var targetX = e.pageX - this.offsetLeft - currentX
var targetY = e.pageY - this.offsetTop - currentY
//最大的移动区间就是 父元素的宽度-子元素的宽度
var maxX = this.offsetWidth - moveBox.offsetWidth
var maxY = this.offsetHeight - moveBox.offsetHeight
//边界判断
// 如果当前定位的位置小于0就让他等于0
if(targetX<0){
targetX = 0
}
if(targetY<0){
targetY = 0
}
//如果当前移动的距离大于我们最大的距离就让他等于这个距离
if(targetX>maxX){
targetX = maxX
}
if(targetY>maxY){
targetY = maxY
}
//控制小盒子的位置
moveBox.style.left = targetX + "px"
moveBox.style.top = targetY + "px"
}
//4.取消对应的大盒子的移动事件 以及大盒子的弹起事件
box.onmouseup = function(){
box.onmouseup = box.onmousemove = false
}
公式
1.鼠标在大盒子的位置就是=当前鼠标在页面上的位置-大盒子的offset值
2.移动位置=得到鼠标在大盒子里面的位置-鼠标在小盒子里的位置
3.最大移动区间=父元素的宽(高)度-子元素的宽(高)度
