1.div随着鼠标移动
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style type="text/css">
*{
margin: 0;
padding: 0;
}
#box1{
width: 150px;
height: 150px;
border-radius: 50%;
background-color: #bfa;
/*没有动是没有开启定位*/
position: absolute;
}
</style>
<script type="text/javascript">
window.onload = function(){
//获取box1
var box1 = document.getElementById("box1");
//这里对box1设置鼠标事件是不正确的
//解决问题.1应该对整个文档流
document.onmousemove = function(event){
//解决兼容性问题
//event = event || window.event;
/*可见框属性：
* clientX和clientY
* 用于获取鼠标在当前为可见窗口的坐标
* div的偏移量，是相对于整个页面的
*
*
* 说明：是因为当前可见页面比整个网页实际上式要小的
* 所以默认的0,0是不一样的，当有了滚动条之后，所以大网页的原点就会往上跑
* 导致0,0出现偏差，所以导致鼠标点和页面不一样，那么，使用页面属性就可以解决这个问题
*
* 页面属性：(鼠标点和框点一样，但是ie8不兼容，2020已经解决)
* pageX和pageY可以获取鼠标相对于当前页面的坐标
* 但是这两个属性在IE8中不支持，所以如果需要兼容IE8需要用可见框属性
*/
//获取鼠标点到的坐标
var x = event.clientX;
var y = event.clientY;
//获取页面的坐标
/*var x = event.pageX;
var y = event.pageY*/;
//解决问题2.那么为了兼容性，我们使用的是哪一种呢
//解决办法，使鼠标和浏览器的00点重合就可以
//想到，滚动条移动的长度就是两个点之间的长度
//获取滚动条的距离
/*
* chrome认为浏览器的滚动条是body的，可以通过body.scrollTop来获取
* 火狐等浏览器认为浏览器的滚动条是HTML的(如果是body的，那么box1就不可以超出，应该包容box1)
* 所以滚动条应该是html的(2020年chrome浏览器已经解决了这个问题，但是还是预防万一)
*
*
*/
//var st = document.body.scrollTop;//获取body的滚动条
//var st = document.documentElement.scrollTop;//获取html的滚动条
//都进行兼容
//当使用第一个的时候就用第一个就可以，第一个不成立使用第二个
//垂直
var st = document.body.scrollTop || document.documentElement.scrollTop;
//水平
var sl = document.body.scrollLeft || document.documentElement.scrollLeft;
//所以这时候滚动条的垂直偏移量我们已经获取到了
//加到div=box1的垂直偏移量当中去就可以
//设置div=box1的偏移量
//得设置box1和鼠标的坐标是一样的
//水平的也要设计
box1.style.left = x + sl +"px";
//st为获取的垂直偏移量+box1的垂直偏移量就刚好等于原点重合
box1.style.top = y + st +"px";
}
//由于冒泡使box2的触发带动document的鼠标事件让box1也可以对box进行使用
//所以我们可以取消冒泡，来达到触发不了document的鼠标事件
//获取box2
var box2 = document.getElementById("box2");
box2.onmousemove = function(event){
//兼容
event = event || window.event;
//取消冒泡
event.cancelBubble = true;
};
};
</script>
</head>
<body id="herde" style="height: 1000px;width: 2000px;">
<div id="box2" style="width: 500px; height: 500px; background-color: #bfa;"></div>
<div id="box1"></div>
</body>
</html>
2.事件的冒泡
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
#box1{
width: 200px;
height: 200px;
background-color: yellowgreen;
}
#s1{
background-color: yellow;
}
</style>
<!--js样式-->
<script type="text/javascript">
window.onload = function(){
//body和div是span的祖先元素,后代元素被触发,则祖先元素也会被触发
/*
* 事件的冒泡 (Bubble)
* - 所谓的冒泡指的就是事件的向上传导，当后代元素上的事件被触发时，其祖先元素的相同事件也会被触发
* - 在开发中大部分情况冒泡都是有用的，如果不希望发生事件冒泡可以通过事件event(自定义)对象来取消冒泡
*
*
*
*/
//获取s1
var s1 = document.getElementById("s1");
//绑定单击响应事件
s1.onclick = function(event){
//兼容
event = event || window.event;
alert("我是span");
//取消冒泡
//可以将事件对象的cancelBubble设置为true,即是取消冒泡
event.cancelBubble = true;
};
//获取box1
var box1 = document.getElementById("box1");
//绑定单击响应事件
box1.onclick = function(){
alert("我是box1");
};
//绑定body单击响应事件
document.onclick = function(){
alert("我是body");
};
};
</script>
</head>
<body>
<div id="box1">
我是box1
<span id="s1">我是span</span>
</div>
</body>
</html>
3.事情的委派
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
li{
list-style:none;
}
</style>
<script type="text/javascript">
window.onload = function(){
/*单击按钮以后添加超链接*/
//获取ul
var u1 = document.getElementById("u1");
//获取按钮btn01
var btn01 = document.getElementById("btn01");
//绑定点击事件
btn01.onclick = function(){
//方式二：
//创建一个li
var li = document.createElement("li");
//把a放进li中
li.innerHTML = "<a href='Javascript:' class='link'>新建的超链接</a>"
//将li放进ul当中
u1.appendChild(li);
};
/*
* 为每一个超链接都绑定一个单击响应函数
* 这里我们为每一个超链接都绑定了一个单击响应函数，这种操作比较麻烦
* 而且这些操作只能为已有的超链接设置事件，而新添加的超链接必须重新绑定
*
*
*
*
*
*
*/
//获取所有的a
//为所有的a绑定事件
var Alla = document.getElementsByTagName("a");
//遍历所有的a
for(var i = 0 ; i < Alla.length ; i++){
Alla[i].onclick = function(){
alert("超链接");
};
}
/*
* 我们希望，只绑定一次事件，即可应用到多个的元素上，即使元素是之后添加的
* 我们可以尝试将其绑定个元素的共同的祖先元素上(强调一点：共同祖先元素)
* 这里指的是ul而不是li，因为li都有各自的li
*
* 事件的委派：
* - 指将事件统一绑定给元素的共同祖先元素，这样当后代元素上的事件触发的时候，会一直冒泡到祖先元素
* 从而通过祖先元素的响应函数来处理事件。
* 好处：事件委派是利用了冒泡，通过委派可以减少事件绑定的次数，提高程序的性能
*
*/
//根据冒泡原理，衍生出来的事件委派
//点击一个a就可以出发ul祖先元素的事件
//只使用父元素绑定了一次就可以通过冒泡这个固有的属性来给a使用
//给祖先元素ul绑定单击响应函数
u1.onclick = function(event){
//兼容
event = event || window.event;
//这样会有一个缺点，点击li或者ul的区域的时候，也会出发函数
//所有我们加一个判断
//如果触发事件的对象是我们期望的元素，则执行否则不执行
/*通过事件，通过属性，把鼠标点击的目标获取到
* target
* - event中的target表示触发事件的对象
*
*
*
*/
//alert(event.target);
//判断鼠标点击事件是不是link
if(event.target.className =="link" )//这里link有个小隐患，就是 class="link hello" if判断就会失效
{
alert("超链接");
}
};
};
</script>
</head>
<body>
<button id="btn01">点击我就加一个超链接</button>
<ul id="u1" style="background-color: #bfa;">
<li><a href="Javascript:;" class="link">超链接1</a></li>
<li><a href="Javascript:;" class="link">超链接2</a></li>
<li><a href="Javascript:;" class="link">超链接3</a></li>
</ul>
</body>
</html>
4.绑定事件
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript">
window.onload = function(){
/*
点击按钮以后弹出一个内容
*/
//获取按钮对象
var btn01 = document.getElementById("btn01");
/*
* 使用 对象.事件 = 函数的形式绑定响应函数
* 它只能同时为一个元素的事件绑定一个响应函数
* 不能绑定多个，如果绑定了多个，后面的事件会覆盖掉前面的
*
*/
//为btn01绑定一个单击响应函数
/*btn01.onclick = function(){
alert("1");
};*/
//为btn01绑定一个单击响应函数
/*btn01.onclick = function(){
alert("2");
};*/
//那怎么解决？？？？？
/*
* addEventListener()
* - 通过这个方法也可以为元素绑定响应函数
* - 参数：
* 1.事件的字符串，不要on
* 2.回调函数，当事件触发的时候该函数会被调用
* 3.是否在捕获阶段触发事件，需要一个布尔值，一般设置为false
*
* 使用addEventListener()可以同时为一个元素的相同事件同时绑定多个响应函数，
* 这样当事件被触发的时候，响应函数将会按照函数的绑定顺序执行
*
* 局限性：这个方法不知ie8及以下浏览器
*
*/
//连续绑定单击响应函数，连续触发
/*btn01.addEventListener("click",function(){
alert("1");
},false);
btn01.addEventListener("click",function(){
alert("2");
},false);
btn01.addEventListener("click",function(){
alert("3");
},false);
*/
//新越是纯净，学的东西就越多
//5G时代的到来，更主要的是代码的加载速度一定要块
/*
*
*
* attachEvent()
* - 支持ie8的浏览器，可以绑定事件
* - 参数：
* 1. 事件的字符串，需要on
* 2. 回调函数
*
*
* - 这个方法也是同时为一个事件绑定多个处理函数
* 不同的是它绑定先执行，执行顺序和ddEventListener()相反
*
*/
/*btn01.attachEvent("onclick",function(){
alert(1);
});
btn01.attachEvent("onclick",function(){
alert(2);
});*/
//调用函数
bind(btn01,"click",function(){
alert("1");
});
/*bind(btn01,"click",function(){
alert("2");
});*/
};
//定义一个函数，用来为指定元素绑定响应函数 并且是用来兼容浏览器
/*
* addEventListener()中的this是这绑定事件的对象
* attachEvent()中的this，是window
* 需要统一两个方法this
*
*/
/*
* 参数：
* obj 要绑定的事件对象(对象)
* eventStr 事件的字符串(事件)
* callback 回调函数(执行函数)
*
*
*
* 传递参数的个数自己决定：一切皆对象都可以传
*
*/
function bind(obj , eventStr , callback){
//大部分浏览器的兼容方式
//obj.addEventListener(eventStr , callback , false);
//ie8及以下支持的兼容方式
//obj.attachEvent(eventStr , callback);
//obj.attachEvent("on"+eventStr , callback);
//拿什么判断？？？？？？
//就是如果obj里面含有这个属性则 执行普通浏览器的obj.addEventListener
//有另外一个就执行ie浏览器的obj.attachEvent，把它融合起来
//兼容浏览器问题
if (obj.addEventListener) {
obj.addEventListener(eventStr , callback , false);
} else{
/*
* this是谁由调用方式决定的
* callback.call(obj);
* - call();这个方法是改变this指向的对象
*
*
*/
//因为在ie中的函数对象this指向是window，是浏览器调用的函数
//所以现在我们无法改变浏览器调用的对象在参数callback中，最后通过加上一个匿名函数function()
//把方法写进内部，间接调用，改变this的指向对象
obj.attachEvent("on"+eventStr , function(){
//所以我们得把它变为当前得这个对象obj，使this重新绑定到了obj上
callback.call(obj);
});
/*
* 运用到一个小技巧，使用一个匿名函数丢给浏览器，浏览器就受到了一个中间物
* 然后，回调函数在匿名函数内部，这样我们就可以修改它的this指向
*
*/
/*自己复述：一遍思路清晰很多*/
}
}
</script>
</head>
<body>
<button id="btn01">点击一下</button>
</body>
</html>
5.事件的传播
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
#box1{
width:300px;
height: 300px;
background-color: #9ACD32;
}
#box2{
width:200px;
height: 200px;
background-color: #FFFF00
}
#box3{
width:150px;
height:150px;
background-color: red;
}
</style>
<script type="text/javascript">
window.onload = function(){
//获取3个div
var box1 = document.getElementById("box1");
var box2 = document.getElementById("box2");
var box3 = document.getElementById("box3");
/*
* 事件的传播
* - 关于事件的传播网景公司和微软公司有不同的理解
* - 微软公司认为事件应该是由内向外传播的，也就是当前事件触发时应该先触发当前元素上的事件
* 然后再向当前一层一层的祖先元素上传播，也就是说执行冒泡阶段
* - 网景公司认为事件应该是由外向内传播的，也就是说当前事件触发时应该先触发当前元素上的最外一层的事件
* 然后再传播给后代元素（到当前元素）
* - W3C综合了两个公司的方案，将事件传播分成了三个阶段
* 1.捕获阶段
* - 在捕获阶段时从最外层的祖先元素，向目标元素进行事件的捕获
* 2.目标阶段
* - 事件捕获到目标元素，捕获结束开始在目标元素上触发事件
* 3.冒泡阶段
* - 事件从目标元素向它的祖先元素传递，依次触发祖先元素上的事件
*
* - 如果希望在捕获阶段就触发事件，可以将addEventListener()的第三个参数设置为true
* 一般情况下我们不会希望在捕获阶段触发事件，所以这个参数一般都是false
*
*
*
*
*
*/
bind(box1,"click",function(){
alert("1");
});
bind(box2,"click",function(){
alert("2");
});
bind(box3,"click",function(){
alert("3");
});
};
function bind(obj , eventStr , callback){
if (obj.addEventListener) {
//obj.addEventListener(eventStr , callback , true);//点击执行3则有执行顺序： 外层1 中层2 内层3(从外到内)
obj.addEventListener(eventStr , callback , false);//点击执行3则有执行顺序： 外层3 中层2 内层1(从内到外)
} else{
obj.attachEvent("on"+eventStr , function(){
callback.call(obj);
});
}
}
</script>
</head>
<body>
<div id="box1">
<div id="box2">
<div id="box3"></div>
</div>
</div>
</body>
</html>
6.拖拽练习
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
#box1{
width: 100px;
height: 100px;
background-color: #bfa;
border-radius: 50%;
position: absolute;
}
#box2{
width: 100px;
height: 100px;
background-color: red;
border-radius: 50%;
position: absolute;
left: 300px;
top: 300px;
}
</style>
<script type="text/javascript">
window.onload = function(){
/*
* 业务逻辑：
* 1.当鼠标长按下的时候开始移动 onmousedown
* 2.当鼠标不怂开的时候一直在动 onmousemove
* 3.当鼠标停下的时候，停留在某一位置 onmouseup
*
*
*
*/
var box1 = document.getElementById("box1");
var box2 = document.getElementById("box2");
var img1 = document.getElementById("img1");
//调用的方式也是在window.onload
//调用box1
drag(box1);
//调用box2
drag(box2);
//调用
drag(img1);
};
//现在也想让box2使用这拖拽，封装一波函数
function drag(obj){
obj.onmousedown = function(event){
//设置box1捕获所有鼠标按下的事件
//搞定ie8的兼容性
// box1.setCapture();//会死循环，必须在结束释放捕获
/*
* setCaptrue()
* - 只有IE支持，但是在火狐中调用时不会报错
* 而如果chrome调用，会报错，当box1.setCapture()报错，下面的代码不会执行
*
*/
//解决2016年谷歌浏览器不兼容的问题，2020年已经不用这一个
//方式一：
/*if(box1.setCapture){
box1.setCapture();
}*/
//方式二：(第一个true时，才会看第二个，第一个false时，不看第二个)
obj.setCapture && obj.setCapture();
//兼容性
event = event || window.event;
//设置拖拽鼠标点哪，鼠标放哪，而不是一直都在左上角
//div的偏移量 鼠标.clientX - 元素.offsetLeft
//div的偏移量 鼠标.clientY - 元素.offsetTop
//图片解释在拖拽
var ol = event.clientX - obj.offsetLeft;
var ot = event.clientY - obj.offsetTop;
document.onmousemove = function(event){
event = event || window.event;
//获取坐标box1改变后的值
var xleft = event.clientX - ol;
var ytop = event.clientY - ot;
//改变box1以后的值赋值给左边的box1，生成新的坐标
obj.style.left = xleft + "px";//不要忘记加上单位
obj.style.top = ytop + "px";
};
//为鼠标绑定一个鼠标松开事件
obj.onmouseup = function(){
//当鼠标松开时，被拖拽元素固定在当前位置 onmouseup
//取消document的onmousemove事件
document.onmousemove = null;
//取消document的onmouseup事件
document.onmouseup = null;
//释放捕获,解决ie8的浏览器不兼容问题
//box1.releaseCapture();
//和楼上的setCapture一样
obj.releaseCapture && obj.releaseCapture();
};
/*
* 当我们拖拽一个网页中的内容时，浏览器会默认去搜索引擎中搜索内容，
* 此时会导致拖拽功能的的异常，这是浏览器提供的默认行为
* 如果不希望发生这个行为，则可以通过return false来取消默认行为
*
* 但是这招对IE8不起作用
*
*/
//只对当前事件起作用，对其他浏览器起作用
return false;
};
};
</script>
</head>
<body>
我是一个标题
<div id="box1"></div>
<div id="box2"></div>
<img src="img/t.jpg"/ style="position: absolute; width: 250px; height: 250px;" id="img1">
</body>
</html>
7.拖拽练习1
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
#box1{
width: 100px;
height: 100px;
background-color: red;
position: absolute;
}
#box2{
width: 100px;
height: 100px;
background-color: yellow;
position: absolute;
left: 200px;
top: 200px;
}
</style>
<script type="text/javascript">
window.onload = function(){
/*
* 拖拽box1元素
* - 拖拽的流程
* 1.当鼠标在被拖拽元素上按下时，开始拖拽 onmousedown
* 2.当鼠标移动时被拖拽元素跟随鼠标移动 onmousemove
* 3.当鼠标松开时，被拖拽元素固定在当前位置 onmouseup
*/
//获取box1
var box1 = document.getElementById("box1");
//为box1绑定一个鼠标按下事件
//当鼠标在被拖拽元素上按下时，开始拖拽 onmousedown
box1.onmousedown = function(event){
event = event || window.event;
//div的偏移量 鼠标.clentX - 元素.offsetLeft
//div的偏移量 鼠标.clentY - 元素.offsetTop
var ol = event.clientX - box1.offsetLeft;
var ot = event.clientY - box1.offsetTop;
//为document绑定一个onmousemove事件
document.onmousemove = function(event){
event = event || window.event;
//当鼠标移动时被拖拽元素跟随鼠标移动 onmousemove
//获取鼠标的坐标
var left = event.clientX - ol;
var top = event.clientY - ot;
//修改box1的位置
box1.style.left = left+"px";
box1.style.top = top+"px";
};
//为document绑定一个鼠标松开事件
document.onmouseup = function(){
//当鼠标松开时，被拖拽元素固定在当前位置 onmouseup
//取消document的onmousemove事件
document.onmousemove = null;
//取消document的onmouseup事件
document.onmouseup = null;
};
};
};
</script>
</head>
<body>
<div id="box1"></div>
<div id="box2"></div>
</body>
</html>
8.拖拽练习2
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
#box1{
width: 100px;
height: 100px;
background-color: red;
position: absolute;
}
#box2{
width: 100px;
height: 100px;
background-color: yellow;
position: absolute;
left: 200px;
top: 200px;
}
</style>
<script type="text/javascript">
window.onload = function(){
/*
* 拖拽box1元素
* - 拖拽的流程
* 1.当鼠标在被拖拽元素上按下时，开始拖拽 onmousedown
* 2.当鼠标移动时被拖拽元素跟随鼠标移动 onmousemove
* 3.当鼠标松开时，被拖拽元素固定在当前位置 onmouseup
*/
//获取box1
var box1 = document.getElementById("box1");
var box2 = document.getElementById("box2");
//为box1绑定一个鼠标按下事件
//当鼠标在被拖拽元素上按下时，开始拖拽 onmousedown
box1.onmousedown = function(event){
//设置box1捕获所有鼠标按下的事件
/*
* setCapture()
* - 只有IE支持，但是在火狐中调用时不会报错，
* 而如果使用chrome调用，会报错
*/
/*if(box1.setCapture){
box1.setCapture();
}*/
box1.setCapture && box1.setCapture();
event = event || window.event;
//div的偏移量 鼠标.clentX - 元素.offsetLeft
//div的偏移量 鼠标.clentY - 元素.offsetTop
var ol = event.clientX - box1.offsetLeft;
var ot = event.clientY - box1.offsetTop;
//为document绑定一个onmousemove事件
document.onmousemove = function(event){
event = event || window.event;
//当鼠标移动时被拖拽元素跟随鼠标移动 onmousemove
//获取鼠标的坐标
var left = event.clientX - ol;
var top = event.clientY - ot;
//修改box1的位置
box1.style.left = left+"px";
box1.style.top = top+"px";
};
//为document绑定一个鼠标松开事件
document.onmouseup = function(){
//当鼠标松开时，被拖拽元素固定在当前位置 onmouseup
//取消document的onmousemove事件
document.onmousemove = null;
//取消document的onmouseup事件
document.onmouseup = null;
//当鼠标松开时，取消对事件的捕获
box1.releaseCapture && box1.releaseCapture();
};
/*
* 当我们拖拽一个网页中的内容时，浏览器会默认去搜索引擎中搜索内容，
* 此时会导致拖拽功能的异常，这个是浏览器提供的默认行为，
* 如果不希望发生这个行为，则可以通过return false来取消默认行为
*
* 但是这招对IE8不起作用
*/
return false;
};
};
</script>
</head>
<body>
我是一段文字
<div id="box1"></div>
<div id="box2"></div>
</body>
</html>
9.拖拽练习3
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
#box1{
width: 100px;
height: 100px;
background-color: red;
position: absolute;
}
#box2{
width: 100px;
height: 100px;
background-color: yellow;
position: absolute;
left: 200px;
top: 200px;
}
</style>
<script type="text/javascript">
window.onload = function(){
/*
* 拖拽box1元素
* - 拖拽的流程
* 1.当鼠标在被拖拽元素上按下时，开始拖拽 onmousedown
* 2.当鼠标移动时被拖拽元素跟随鼠标移动 onmousemove
* 3.当鼠标松开时，被拖拽元素固定在当前位置 onmouseup
*/
//获取box1
var box1 = document.getElementById("box1");
var box2 = document.getElementById("box2");
var img1 = document.getElementById("img1");
//开启box1的拖拽
drag(box1);
//开启box2的
drag(box2);
drag(img1);
};
/*
* 提取一个专门用来设置拖拽的函数
* 参数：开启拖拽的元素
*/
function drag(obj){
//当鼠标在被拖拽元素上按下时，开始拖拽 onmousedown
obj.onmousedown = function(event){
//设置box1捕获所有鼠标按下的事件
/*
* setCapture()
* - 只有IE支持，但是在火狐中调用时不会报错，
* 而如果使用chrome调用，会报错
*/
/*if(box1.setCapture){
box1.setCapture();
}*/
obj.setCapture && obj.setCapture();
event = event || window.event;
//div的偏移量 鼠标.clentX - 元素.offsetLeft
//div的偏移量 鼠标.clentY - 元素.offsetTop
var ol = event.clientX - obj.offsetLeft;
var ot = event.clientY - obj.offsetTop;
//为document绑定一个onmousemove事件
document.onmousemove = function(event){
event = event || window.event;
//当鼠标移动时被拖拽元素跟随鼠标移动 onmousemove
//获取鼠标的坐标
var left = event.clientX - ol;
var top = event.clientY - ot;
//修改box1的位置
obj.style.left = left+"px";
obj.style.top = top+"px";
};
//为document绑定一个鼠标松开事件
document.onmouseup = function(){
//当鼠标松开时，被拖拽元素固定在当前位置 onmouseup
//取消document的onmousemove事件
document.onmousemove = null;
//取消document的onmouseup事件
document.onmouseup = null;
//当鼠标松开时，取消对事件的捕获
obj.releaseCapture && obj.releaseCapture();
};
/*
* 当我们拖拽一个网页中的内容时，浏览器会默认去搜索引擎中搜索内容，
* 此时会导致拖拽功能的异常，这个是浏览器提供的默认行为，
* 如果不希望发生这个行为，则可以通过return false来取消默认行为
*
* 但是这招对IE8不起作用
*/
return false;
};
}
</script>
</head>
<body>
我是一段文字
<div id="box1"></div>
<div id="box2"></div>
<img src="img/an.jpg" id="img1" style="position: absolute;"/>
</body>
</html>
总结：14这一个还是很重要的知识点
100
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
