Skip to content

Commit 7a4119f

Browse files
EishedEished
committed
增加事件绑定、高级拖拽
1 parent bf8d49b commit 7a4119f

1 file changed

Lines changed: 172 additions & 11 deletions

File tree

‎readme.md‎

Lines changed: 172 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -3414,7 +3414,7 @@
34143414
- 使用 `rgba(R,G,B,opacity)` 间接的设定 `opacity` 的值，这个属性不会向下继承
34153415
- 或者把 `opacity` 属性放到同级元素实现
34163416

3417-
3417+
- 笔记：父级使用相对定位，子级才能在范围内绝对定位
34183418

34193419
## JS 运动中级
34203420

@@ -4405,7 +4405,7 @@
44054405
}else if(bottom){
44064406
oDiv.style.top = oDiv.offsetTop+10+"px";
44074407
}
4408-
},50);
4408+
},30);
44094409
44104410
//执行完后，所有对应变量恢复为false，保持静止不动
44114411
document.onkeyup = function(ev){
@@ -4554,9 +4554,16 @@
45544554
<body>
45554555
<input type="text" name="" id="txt">
45564556
<div id="div1">
4557-
<li>123</li><li>456</li><li>789</li><li>123</li> <li>456</li>
4558-
<li>789</li><li>123</li><li>456</li><li>789</li>
4559-
</di'v>
4557+
<li>123</li>
4558+
<li>456</li>
4559+
<li>789</li>
4560+
<li>123</li>
4561+
<li>456</li>
4562+
<li>789</li>
4563+
<li>123</li>
4564+
<li>456</li>
4565+
<li>789</li>
4566+
</div>
45604567
</body>
45614568
</html>
45624569
```
@@ -4644,7 +4651,7 @@
46444651
</script>
46454652
</head>
46464653
<body>
4647-
<div id="div1"></di'v>
4654+
<div id="div1"></div>
46484655
</body>
46494656
</html>
46504657
```
@@ -4655,16 +4662,73 @@
46554662

46564663
### 事件绑定
46574664

4658-
- IE 方式：不兼容 IE9 以上
4665+
- IE 方式：
46594666
- `attachEvent(事件名称, 函数)`，绑定事件处理函数
46604667
- `detachEvent(事件名称, 函数)`，接触绑定
4661-
- DOM 方式：不兼容 IE7 以下
4668+
4669+
- DOM 方式：不兼容 IE7
46624670
- `addEventListener(事件名称, 函数, 捕获)`
46634671
- `removeEventListener(事件名称, 函数, 捕获)`
4672+
46644673
- 何时使用绑定
4674+
46654675
- 绑定事件和 `this`
4676+
46664677
- 绑定匿名函数，会无法删除
46674678

4679+
- 代码：
4680+
4681+
```HTML
4682+
<!DOCTYPE html>
4683+
<html>
4684+
<head>
4685+
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
4686+
<title>事件绑定</title>
4687+
<link rel="stylesheet" href="../reset.css">
4688+
<style>
4689+
#div1 {
4690+
width: 200px;
4691+
height: 200px;
4692+
position: absolute;
4693+
background-color: rgb(255, 0, 0);
4694+
}
4695+
</style>
4696+
<script>
4697+
// 封装 getElementById 函数
4698+
function get(id) {
4699+
return document.getElementById(id);
4700+
}
4701+
4702+
// 封装 attachEvent 兼容性函数
4703+
function myAddEvent(obj, ev, fn) {
4704+
if (obj.attachEvent) {
4705+
obj.attachEvent('on'+ ev, fn);
4706+
} else {
4707+
obj.addEventListener(ev, fn , false);
4708+
}
4709+
}
4710+
4711+
window.onload = function () {
4712+
var oDiv = get('div1');
4713+
var btn = get('btn');
4714+
myAddEvent(btn, 'click', function () {
4715+
console.log('event');
4716+
})
4717+
myAddEvent(btn, 'click', function () {
4718+
console.log('event2');
4719+
})
4720+
}
4721+
</script>
4722+
</head>
4723+
<body>
4724+
<input type="button" id="btn" value="按钮">
4725+
<div id="div1"></div>
4726+
</body>
4727+
</html>
4728+
```
4729+
4730+
4731+
46684732
### 高级拖拽
46694733

46704734
- 复习拖拽原理
@@ -4685,7 +4749,7 @@
46854749

46864750
- 文字选中
46874751

4688-
- 阻止默认事件
4752+
- 阻止默认事件 `return false` 可以解决 chrome FireFox IE9的文字选中问题
46894753
- IE 下拖动有问题
46904754
- 事件捕获：`.setCapture()` 只兼容IE
46914755
- 取消捕获：`.releaseCapture()`
@@ -4697,10 +4761,107 @@
46974761

46984762
- 代码：
46994763

4700-
```
4764+
```HTML
4765+
<!DOCTYPE html>
4766+
<html>
4767+
<head>
4768+
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
4769+
<title>高级拖拽</title>
4770+
<link rel="stylesheet" href="../reset.css">
4771+
<style>
4772+
#div1 {
4773+
width: 100px;
4774+
height: 100px;
4775+
position: absolute;
4776+
background-color: rgb(82, 177, 255);
4777+
}
4778+
.box {
4779+
border: black dashed 1px;
4780+
position: absolute;
4781+
}
4782+
</style>
4783+
<script>
4784+
// 封装 getElementById 函数
4785+
function get(id) {
4786+
return document.getElementById(id);
4787+
}
4788+
window.onload = function () {
4789+
var oDiv = get('div1');
4790+
var oDiv0 = get('div0');
47014791
4792+
// oDiv.onmousedown 很容易移出范围
4793+
oDiv.onmousedown = function Drag() {
4794+
var ev = event||ev;
4795+
var _this = this;
4796+
4797+
// 鼠标可视区位置 - div左边距 = 鼠标在div内的位置
4798+
var disX = ev.clientX - oDiv.offsetLeft;
4799+
var disY = ev.clientY - oDiv.offsetTop;
4800+
console.log(disX,'可视区鼠标X：', ev.clientX, '鼠标Y：',ev.clientY);
4801+
4802+
// 增加边框
4803+
var oBox = document.createElement('div');
4804+
oBox.className = 'box';
4805+
// 边框的大小 - 线宽 = oDiv 的大小
4806+
oBox.style.width = this.offsetWidth - 2 + 'px';
4807+
oBox.style.height = this.offsetHeight - 2 + 'px';
4808+
oDiv0.appendChild(oBox);
4809+
// 边框的位置 = oDiv 的位置
4810+
oBox.style.left = oDiv.offsetLeft + 'px';
4811+
oBox.style.top = oDiv.offsetTop + 'px';
4812+
// IE7 兼容
4813+
if (this.setCapture) {
4814+
this.onmousemove = mouseMove;
4815+
this.onmouseup = mouseUp;
4816+
oDiv.setCapture();
4817+
} else {
4818+
document.onmousemove = mouseMove;
4819+
document.onmouseup = mouseUp;
4820+
}
4821+
4822+
function mouseUp() {
4823+
this.onmousemove = '';
4824+
this.onmouseup = '';
4825+
// 鼠标松开，oDiv 到 oBox 的位置
4826+
oDiv.style.left = oBox.offsetLeft + 'px';
4827+
oDiv.style.top = oBox.offsetTop + 'px';
4828+
// 删除生成的box
4829+
oDiv0.removeChild(oBox);
4830+
// IE7 兼容
4831+
if (this.releaseCapture) {
4832+
this.releaseCapture();
4833+
}
4834+
}
4835+
4836+
function mouseMove(ev) {
4837+
// 不断获取Event 对象，坐标才会不断更新
4838+
var ev = event||ev;
4839+
// console.log('可视区鼠标X：', ev.clientX, '鼠标Y：',ev.clientY);
4840+
// div位置 = 鼠标可视区新的位置 - 鼠标与div的距离
4841+
var left = ev.clientX -disX;
4842+
var top = ev.clientY - disY;
4843+
// 鼠标移动时 移动虚线框
4844+
oBox.style.left = left + 'px';
4845+
oBox.style.top = top + 'px';
4846+
}
4847+
4848+
// 阻止火狐重影bug, 解决 chrome FireFox IE9的文字选中问题
4849+
return false;
4850+
}
4851+
}
4852+
4853+
</script>
4854+
</head>
4855+
<body>
4856+
<div id="div0">
4857+
asdfasdfas/sad'234
4858+
<div id="div1">asdfasdfas/sad</div>
4859+
asdfasdfas/sad'234
4860+
</div>
4861+
</body>
4862+
</html>
47024863
```
4703-
4864+
47044865

47054866

47064867
### 自定义滚动条

0 commit comments

Comments
 (0)