forked from IT-xzy/WEB-NEW
-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy path1047-JS-04.html
205 lines (183 loc) · 9.62 KB
/
1047-JS-04.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
<!DOCTYPE html>
<!-- saved from url=(0060)https://ptteng.github.io/PPT/PPT/JS-11-Mini-Program.html#/13 -->
<html xmlns="http://www.w3.org/1999/html" class=" js no-mobile desktop no-ie chrome chrome65 ppt-section ppt-section gradient rgba opacity textshadow multiplebgs boxshadow borderimage borderradius cssreflections csstransforms csstransitions no-touch no-retina fontface domloaded w-1366 gt-240 gt-320 gt-480 gt-640 gt-768 gt-800 gt-1024 gt-1280 lt-1440 lt-1680 lt-1920 no-portrait landscape" id="js-11-mini-program-page"><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
<title>如何阻止冒泡事件及默认事件</title>
<link rel="stylesheet" href="./css/reveal/reveal.css">
<!-- PPT主题，可以在/css/reveal/theme/中选择其他主题，目前暂时只能使用该模板 -->
<link rel="stylesheet" href="./css/reveal/theme/ptt.css">
<!-- syntax highlighting 代码高亮主题 -->
<link rel="stylesheet" href="./lib/reveal/css/zenburn.css"
<!-- 打印和PDF输出样式 -->
<script>
var link = document.createElement('link');
link.rel = 'stylesheet';
link.type = 'text/css';
link.href = window.location.search.match(/print-pdf/gi) ? './css/reveal/print/pdf.css' : '../css/reveal/print/paper.css';
document.getElementsByTagName('head')[0].appendChild(link);
</script>
</head>
<body>
<map name="pttmap">
<area shape="rect" coords="0,0,276,58" href="http://www.jnshu.com/" alt="" target="_blank">
</map>
<div class="reveal slide center" role="application" data-transition-speed="default" data-background-transition="fade">
<div class="slides" style="width: 960px; height: 700px; left: 50%; top: 50%; bottom: auto; right: auto; transform: translate(-50%, -50%) scale(0.756);">
<section style="top: 178.5px; display: none;" class="past" hidden="" aria-hidden="true">
<h2>【js-5】如何阻止冒泡事件及默认事件？</h2>
<h3>小课堂127期</h3>
<p style="text-align: center;">分享人：禚洪宇</p>
</section>
<section style="top: 3px; display: none;" class="past" hidden="" aria-hidden="true">
<p>目录</p>
<p>1.背景介绍</p>
<p>2.知识剖析</p>
<p>3.常见问题</p>
<p>4.解决方案</p>
<p>5.编码实战</p>
<p>6.扩展思考</p>
<p>7.参考文献</p>
<p>8.更多讨论</p>
<p><img src="./阿萨德.jpg" alt=""></p>
</section>
<section style="top: 0px; display: none;" class="stack past" data-previous-indexv="0" hidden="" aria-hidden="true">
<section style="top: 267px; display: none;" class="" aria-hidden="true">
<h3>1.背景介绍</h3>
</section>
<section class="future" aria-hidden="true" style="top: 129px; display: none;" hidden="">
<p style="text-align: left;text-indent: 2cm">
页面的哪一部分会拥有某个特定的事件？
</p>
</section>
<section class="future" aria-hidden="true" style="top: 129px; display: none;" hidden="">
<!-- <p style="text-align: left;text-indent: 2cm">
· 事件委托
</p> -->
<p style="text-align: left;text-indent: 2cm">
· 事件流：冒泡与捕获
</p>
<img src="小课堂demo/事件流.png">
</section>
<section class="future" aria-hidden="true" style="top: 129px; display: none;" hidden="">
<p style="text-align: left;text-indent: 2cm">
什么是默认事件？
</p>
</section>
</section>
<section style="top: 0px; display: none;" class="stack past" data-previous-indexv="0" hidden="" aria-hidden="true">
<section style="top: 267px; display: none;" class="" aria-hidden="true">
<h3>2.知识剖析</h3>
</section>
<section class="future" aria-hidden="true" style="top: 38.5px; display: none;" hidden="">
<h4 style="text-align:left">2.1 怎样阻止冒泡事件及默认事件？</h4>
</section>
<section style="text-align: left; top: 21.5px; display: none;" class="future" aria-hidden="true" hidden="">
<p style="text-align:left">
· event.stopPropagation()
</p>
<p>
· ev.cancelBubble = true(IE8以下)
</p>
<p style="text-align:left">
· event.preventDefault()
</p>
<p style="text-align:left">
· return false
</p>
</section>
</section>
<section style="top: 267px; display: none;" class="past" hidden="" aria-hidden="true">
<section style="top: 267px; display: none;" class="" aria-hidden="true">
<h3>3.常见问题</h3>
</section>
<section style="top: 267px; display: none;" class="" aria-hidden="true">
<h4>3.1  AngualrJS中如何阻止冒泡事件传播</h4>
</section>
<section style="top: 267px; display: none;" class="" aria-hidden="true">
<h4>3.2  阻止事件冒泡可以应用于那些场景？</h4>
</section>
<section style="top: 267px; display: none;" class="" aria-hidden="true">
<h4>3.3  事件执行的三个阶段是什么？</h4>
</section>
</section>
<section style="top: 267px; display: none;" class="past" hidden="" aria-hidden="true">
<section style="top: 267px; display: none;" class="" aria-hidden="true">
<h3>4.解决方案</h3>
</section>
<section style="top: 267px; display: none;" class="" aria-hidden="true">
</section>
</section>
</section>
<section style="top: 267px; display: none;" class="past" hidden="" aria-hidden="true">
<h3>5.编码实战</h3>
</section>
<section style="text-align: left; top: 178px; display: block;" class="past" hidden="" aria-hidden="true">
<section style="top: 267px; display: none;" class="" aria-hidden="true">
<h3 style="text-align: center">6.扩展思考</h3>
</section>
<section style="top: 267px; display: none;" class="" aria-hidden="true">
<h4>如何解除解除事件绑定？</h4>
</section>
<section style="top: 267px; display: none;" class="" aria-hidden="true">
<h4>冒泡还是捕获？</h4>
</section>
<section style="top: 267px; display: none;" class="" aria-hidden="true">
<h4>事件代理（事件委托）的原理及优缺点</h4>
</section>
</section>
<section style="top: 267px; display: block;" class="past" hidden="" aria-hidden="true">
<h3>7.参考文献</h3>
<p style="text-align: left">参考一：
<a href="https://www.cnblogs.com/liugang-vip/p/5616484.html">
事件委托
</a>
</p>
<p style="text-align: left">参考二：
<a href="http://www.cnblogs.com/Chen-XiaoJun/p/6210987.html"> 事件冒泡、事件捕获和事件委托
</a>
</p>
<p style="text-align: left">参考三：
<a href="https://blog.csdn.net/wxl1555/article/details/53128966">
阻止事件冒泡，阻止默认事件
</a>
</p>
</section>
<section style="text-align: left; top: 66px; display: block;" hidden="" aria-hidden="true" class="future">
<h3 style="text-align: center">8.更多讨论</h3>
</section>
<section style="top: 245.5px; display: block;" hidden="" aria-hidden="true" class="future">
<h4>感谢观看</h4>
<p>
<small>BY :禚洪宇</small>
</p>
</section>
</div>
</div>
<script src="./lib/reveal/js/head.min.js"></script>
<script src="./lib/reveal/reveal.js"></script>
<script>
// 以下为常见配置属性的默认值
// {
// controls: true, // 是否在右下角展示控制条
// progress: true, // 是否显示演示的进度条
// slideNumber: false, // 是否显示当前幻灯片的页数编号，也可以使用代码slideNumber: 'c / t' ，表示当前页/总页数。
// history: false, // 是否将每个幻灯片改变加入到浏览器的历史记录中去
// keyboard: true, // 是否启用键盘快捷键来导航
// overview: true, // 是否启用幻灯片的概览模式，可使用"Esc"或"o"键来切换概览模式
// center: true, // 是否将幻灯片垂直居中
// touch: true, // 是否在触屏设备上启用触
Reveal.initialize({
history: true,
dependencies: [
{src: './plugin/markdown/marked.js'},
{src: './plugin/markdown/markdown.js'},
{src: './plugin/notes/notes.js', async: true},
{
src: './plugin/highlight/highlight.js', async: true, callback: function () {
hljs.initHighlightingOnLoad();
}
}
]
});
</script>
</body></html>