This commit is contained in:
qianguyihao 2019-11-12 17:16:46 +08:00
parent fbb8c34468
commit e947d2d9f8
3 changed files with 10 additions and 11 deletions

View File

@ -248,12 +248,12 @@ event.cancelBubble = true
var pagey = event.pageY || scroll().top + event.clientY;
// 设置div的偏移量相对于整个页面
// 注意,如果想通过 style.left 来设置属性,一定要给 box1开启绝对定位。
// 注意,如果想通过 style.left 来设置属性,一定要给 box1 开启绝对定位。
box1.style.left = pagex + 'px';
box1.style.top = pagey + 'px';
};
// 【重要注释】
// 【重要注释】
// 当 document.onmousemove 和 box2.onmousemove 同时触发时,通过 box2 阻止事件向 document 冒泡。
// 也就是说,只要是在 box2 的区域,就只触发 document.onmousemove 事件
var box2 = document.getElementById('box2');
@ -286,12 +286,13 @@ event.cancelBubble = true
</html>
```
关键地方可以看代码中的注释。
效果演示:
![](http://img.smyhvae.com/20191112_1650.gif)
## 我的公众号
想学习<font color=#0000ff>**代码之外的技能**</font>?不妨关注我的微信公众号:**千古壹号**id`qianguyihao`)。

View File

@ -3,10 +3,13 @@
## 前言
要学习事件的基础内容,请看先本人的这篇基础文章:
要学习事件的基础内容,请看先本人之前的基础文章:
- [JavaScript基础事件对象Event和冒泡](https://github.com/smyhvae/Web/blob/master/03-JavaScript/09-JavaScript%E5%9F%BA%E7%A1%80%EF%BC%9A%E4%BA%8B%E4%BB%B6%E5%AF%B9%E8%B1%A1Event%E5%92%8C%E5%86%92%E6%B3%A1.md)
- 《04-JavaScript基础/27-事件对象Event》
- 《04-JavaScript基础/28-事件捕获和事件冒泡》
- 《04-JavaScript基础/29-事件委托》
知识难度不大,只是大家需要系统地学习。
@ -296,16 +299,11 @@ IE10以下则是
```
## 事件委托
参考本人这篇文章的最后一段:
- [JavaScript基础事件对象Event和冒泡](https://github.com/smyhvae/Web/blob/master/03-JavaScript/09-JavaScript%E5%9F%BA%E7%A1%80%EF%BC%9A%E4%BA%8B%E4%BB%B6%E5%AF%B9%E8%B1%A1Event%E5%92%8C%E5%86%92%E6%B3%A1.md)
- 《04-JavaScript基础/29-事件委托》