模仿某度的登录
首先要了解鼠标的位置，client是用来记录键盘的位置坐标，clientX就是x轴，clientY也就是y轴。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>鼠标位置</title>
<style type="text/css">
*{
margin: 0;
padding: 0;
}
#box1{
height: 100px;
background-color: orange;
}
#box2{
height: 200px;
margin-top: 50px;
background-color: red;
}
</style>
</head>
<body>
<div id="box1"></div>
<div id="box2"></div>
<script type="text/javascript">
var oBox1 = document.getElementById('box1')
var oBox2 = document.getElementById('box2')
oBox1.onclick = function(ev){
var ev = ev || event
console.log("X轴:",ev.clientX,"Y轴:",ev.clientY)
}
oBox2.onclick = function(ev){
var ev = ev || event
console.log("X轴:",ev.clientX,"Y轴:",ev.clientY)
}
</script>
</body>
</html>
然后就是进行了解某度的登录的拖拽原理，里面用到了一个新的知识，offsetLeft这个是用来记录浏览器和内容的距离的长度。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>拖拽原理</title>
<style type="text/css">
#box{
height: 200px;
width: 200px;
position: absolute;
background-color: red;
top: 0;
left: 0;
}
</style>
</head>
<body>
<div id="box"></div>
<script type="text/javascript">
var oBox = document.getElementById('box')
oBox.onclick = function(){
console.log(oBox.offsetLeft,oBox.offsetTop)
}
</script>
</body>
</html>
这里我加的定位absolute 然后内容都设置的为0，故此打印出来的坐标内容也是0,0。
然后下面就开始某度的表演！
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
#box{
height: 200px;
width: 200px;
position: absolute;
background-color: red;
top: 100px;
left: 100px;
}
</style>
</head>
<body>
<div id="box"></div>
<script type="text/javascript">
var oBox = document.getElementById('box')
//鼠标按下触发
oBox.onmousedown = function(ev){
var ev = ev || event
var difx = ev.clientX - oBox.offsetLeft
var dify = ev.clientY - oBox.offsetTop
// console.log("difx:",difx,"dify:",dify)
//移动鼠标 移动鼠标触发
oBox.onmousemove = function(ev){
var ev = ev || event
console.log(ev.clientX,difx,ev.clientY,dify)
var oBox_left = ev.clientX - difx
var oBox_top = ev.clientY - dify
console.log(oBox_left,oBox_top)
oBox.style.top = oBox_top + "px"
oBox.style.left = oBox_left + "px"
}
//抬起鼠标触发
oBox.onmouseup = function(){
//让box不动 清空上面的元素
oBox.onmousemove = null
}
}
</script>
</body>
</html>
首先这里用到了三个鼠标事件，onmousedown这是鼠标按下时触发的事件；onmousemove这是鼠标移动的时候触发的事件；
onmouseup 这个是鼠标抬起的时候触发的事件。然后开始var 新建函数 首先定义一个ev的函数，这个函数的功能是可以解决兼容性的问题，然后下面的difx是记录鼠标位置X轴减去盒子和浏览器距离的值，下面函数也是同上。
这个就是上面那个函数的原理，1是offsetLeft，2是clientX鼠标的坐标值。
然后下面就开始鼠标移动时触发的内容了，定义两个新的函数，然后用鼠标的坐标减去那个值，然后给style进行赋值就好了。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>keycode</title>
<style type="text/css">
#box{
height: 100px;
width: 100px;
background-color: red;
position: absolute;
}
</style>
</head>
<body>
<div id="box"></div>
<!--让键盘去控制div的方向-->
<script type="text/javascript">
var oBox = document.getElementById('box')
var x = 0
var y = 0
document.onkeyup = function(ev){
//获取 w--87 s---83 a---65 d---68 的值
var ev = ev || event
console.log(ev.keyCode)
switch(ev.keyCode){
case 87:
//往上移动
y -= 20
break
case 83:
//往下移动
y += 20
break
case 65:
//往左移动
x -= 20
break
case 68:
//往右移动
x += 20
break
}
console.log(x,y)
oBox.style.top = y + "px"
oBox.style.left = x + "px"
}
</script>
</body>
</html>
这个是简单的，keycode也就是键盘码的操作，用的技术含量不多。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>事件冒泡</title>
<style type="text/css">
#box1{
height: 300px;
width: 300px;
background-color: red;
margin: 0 auto;
}
#box2{
height: 200px;
width: 200px;
background-color: green;
margin: 0 auto;
}
#box3{
height: 100px;
width: 100px;
background-color: brown;
margin: 0 auto;
}
</style>
</head>
<body>
<div id="box1">
box1
<div id="box2">
box2
<div id="box3">box3
</div>
</div>
</div>
<script type="text/javascript">
var oBox1 = document.getElementById('box1')
var oBox2 = document.getElementById('box2')
var oBox3 = document.getElementById('box3')
function fn1(){
alert(this.id)
}
oBox1.onclick = fn1;
oBox2.onclick = fn1;
oBox3.onclick = fn1;
</script>
</body>
</html>
什么是事件冒泡？
DOM中，树状结构决定了子元素肯定在父元素里，所以点击子元素，就同时点击了子元素和父元素，以及父元素的父元素，以此类推，当然最终的根节点都是文档，以及window。
试想，当一个子元素被点击的时候，不仅仅这个元素本身被点击了，因为这个元素也在其上一级父元素中(属于父级元素的地盘)，所以相当于其父元素也被点击了，以此类推，一层一层往外推，最终整个文档也是被点击了，如果每个层级的节点元素都绑定了click事件，那么每个节点的click事件函数都会被执行。举个形象的例子，一个村里的人被打了（click），首先就要按照村里的规矩处理，同时这个村属于某个乡镇，当然也是相当于这个乡镇的人被打了，那么也要按照这个乡镇的规矩处理，以此一层一层往上报。这个例子不准确的地方就是，现实中一个人因为一个事件只会被处理一次，不会因为同一件事情多次处理。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>事件冒泡的影响</title>
<style type="text/css">
#box{
height: 200px;
width: 200px;
background-color: orange;
display: none;
}
</style>
</head>
<body>
<button id="btn">显示</button>
<div id="box"></div>
<script type="text/javascript">
var oBox = document.getElementById('box')
var oBtn = document.getElementById('btn')
oBtn.onclick = function(){
oBox.style.display = "block"
}
</script>
</body>
</html>
windows是顶级的函数，所以会阻止这个。