javascript基礎(事件的冒泡)(三十二)
1.冒泡簡介:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
#box1{
width: 200px;
height: 200px;
background-color: yellowgreen;
}
#s1{
display: block;
width: 100px;
height: 100px;
background-color: yellow;
position: absolute;
top: 500px;
}
</style>
<script type="text/javascript">
window.onload = function(){
/*
* 冒泡(Bubble)
* - 冒泡簡單來說就是事件的向上傳導,當後代元素上的事件被觸發時,
* 將會導致祖先元素上的相同事件也被觸發
* - 大部分情況下冒泡都是對開發有利的,可以簡化我們的開發
* - 如果不希望發生事件的冒泡,則可以通過事件物件來取消冒泡
* - 將事件物件的cancelBubble屬性設定true,即可取消冒泡
*
*/
//為span繫結一個單擊響應函式
var s1 = document.getElementById("s1");
s1.onclick = function(event){
event = event || window.event;
alert("我是span的單擊響應函式~~~~");
//取消冒泡
//event.cancelBubble = true;
};
//為div繫結一個單擊響應函式
var box1 = document.getElementById("box1");
box1.onclick = function(event){
event = event || window.event
alert("我是div的單擊響應函式~~~~");
//event.cancelBubble = true;
};
//為body繫結一個單擊響應函式
document.body.onclick = function(){
alert("我是body的單擊響應函式~~~~");
};
};
</script>
</head>
<body>
<div id="box1">
<span id="s1">我是一個span</span>
</div>
</body>
</html>
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;
}
</style>
<script type="text/javascript">
window.onload = function(){
/*
* 使div可以跟隨滑鼠移動
*
* 使div跟隨滑鼠移動,實際上就是將div的偏移量設定為滑鼠的座標
*/
//獲取box1
var box1 = document.getElementById("box1");
//取消box1滑鼠移動的冒泡
/*box1.onmousemove = function(event){
event = event || window.event;
event.cancelBubble = true;
};*/
//繫結一個滑鼠移動的事件
document.onmousemove = function(event){
//處理相容的問題
event = event || window.event;
/*
* 事件物件的clientX和clientY獲取的座標是滑鼠相對於瀏覽器視窗可見區域的座標
* 但是元素的偏移量相對於頁面的,所以當拖動滾動條時,會發現滑鼠指標和元素的位置發生了偏離
*
* 為了解決這個問題,可以將滾動條滾動的距離加到偏移量中
*/
//獲取垂直方向的滾動距離
/*
* 在chrome瀏覽器中,認為視窗的滾動條就是body的,可以通過body來獲取
*
* 而其他瀏覽器認為瀏覽器的滾動條是html的,需要通過html根標籤來獲取
*/
//var st = document.body.scrollTop;
//var st = document.documentElement.scrollTop;
var st = document.documentElement.scrollTop || document.body.scrollTop;
var sl = document.documentElement.scrollLeft || document.body.scrollLeft;
//獲取滑鼠的座標
/*
* pageX
* pageY
* - 可以獲取滑鼠指標相對於頁面的水平和垂直座標
* - 但是這兩個屬性在IE8及以下的瀏覽器中並不支援,所以如果需要相容IE8則不能使用
*/
var left = event.clientX;
var top = event.clientY;
//修改box1的偏移量
box1.style.left = left + sl + "px";
box1.style.top = top + st + "px";
};
};
</script>
</head>
<body style="height: 3000px; width: 3000px;">
<div id="box1"></div>
</body>
</html>
相關文章
- JavaScript 事件冒泡JavaScript事件
- JavaScript阻止事件冒泡JavaScript事件
- javascript阻止事件冒泡程式碼JavaScript事件
- Javascript中的事件冒泡與捕獲JavaScript事件
- javascript事件冒泡和事件捕獲型別JavaScript事件型別
- javascript事件冒泡簡單例項JavaScript事件單例
- JavaScript事件冒泡、事件捕獲和阻止預設事件JavaScript事件
- javascript事件基礎知識JavaScript事件
- JavaScript基礎之事件eventJavaScript事件
- 事件的冒泡事件
- javascript基礎(事件的委派)(三十三)JavaScript事件
- JavaScript 阻止事件冒泡程式碼例項JavaScript事件
- JavaScript事件捕獲冒泡與捕獲JavaScript事件
- JavaScript和JQuery的滑鼠mouse事件冒泡處理JavaScriptjQuery事件
- 原生javascript的return false並不能阻止事件冒泡JavaScriptFalse事件
- javascript的事件監聽與捕獲和冒泡JavaScript事件
- javascript基礎(事件物件)(三十一)JavaScript事件物件
- javascript基礎(滾輪的事件)(三十七)JavaScript事件
- javascript基礎(事件的傳播)(三十五)JavaScript事件
- javascript基礎(事件的繫結)(三十四)JavaScript事件
- jquery的冒泡事件jQuery事件
- javascript基礎(鍵盤事件)(三十八)JavaScript事件
- JavaScript阻止冒泡和取消事件預設行為JavaScript事件
- jQuery 事件冒泡jQuery事件
- Javascript事件模型系列(二)事件的捕獲-冒泡機制及事件委託機制JavaScript事件模型
- JavaScript的基礎語法及DOM元素和事件JavaScript事件
- JavaScript高階程式設計筆記 事件冒泡和事件捕獲JavaScript程式設計筆記事件
- 前端學習程式碼例項-JavaScript阻止事件冒泡前端JavaScript事件
- 事件冒泡 和 事件捕獲事件
- jquery阻止事件冒泡jQuery事件
- JS事件(事件冒泡和事件捕獲)JS事件
- 理解js的事件冒泡和事件捕獲JS事件
- 事件的捕獲、冒泡、委託事件
- js 事件的冒泡和委託JS事件
- JQuery6:事件冒泡jQuery事件
- stopPropagation() 阻止事件冒泡事件
- jQuery如何阻止事件冒泡jQuery事件
- javascript基礎(滑鼠事件拖拽,setCapture()方法)(三十六)JavaScript事件APT