在說事件冒泡之前,我們先說說事件物件(event)
在觸發dom上某個事件時,會產生乙個事件物件event,這個物件包含著所有事件有關的資訊(導致事件的元素、事件的型別、與特定事件相關的資訊)
所有瀏覽器都支援event物件,但支援方式不同
ie中的事件物件:window.event
/*封裝event物件
ie:window.event
*/function
getevent(event)
什麼是事件冒泡即事件開始時由最具體的元素(文件中巢狀最深的那個元素)接收,然後逐級向上傳播到較不為具體的節點
所有瀏覽器都支援事件冒泡
>事件冒泡
title
>
<
meta
name
="description"
content
="">
<
meta
name
="keywords"
content
="">
<
link
href
=""rel
="stylesheet"
>
<
style
>
.one
.two
.three
style
>
<
script
src
= ""
>
script
>
<
script
>
$(function
());
$(".two
").click(
function
(event) );
$(".three
").click(
function
(event) );
});script
>
head
>
<
body
>
<
div
class
="one"
>
我是one(div)
<
p class
="two"
>
我是two(p)
<
span
class
="three"
>我是three(span)
span
>
p>
div>
body
>
html
>
當在span、p、div元素上各繫結乙個click事件,當單擊span元素時,會依次觸發三個事件,即span、p、div元素上的click事件,這就是事件冒泡,按照dom層次結構像水泡一樣不斷向上直至頂端
阻止事件冒泡dom中提供stoppropagation()方法,但ie不支援,使用event物件在事件函式中呼叫就行
ie中提供的是,cancelbubble屬性,預設為false,當它設定為true時,就是阻止事件冒泡,也是用event物件在事件函式中呼叫
/*封裝事件冒泡函式:
document.all:判斷瀏覽器是否是ie
ie:cancelbubble
firefox:stoppropagation
*/function
stoppropagation(e)
else
}
jquery中提供了stoppropagation()方法來停止事件冒泡,當需要時,只需用用event物件來呼叫就行,即event.stoppropagation();
什麼是預設行為網頁元素,都有自己的預設行為,例如,單擊超連結會跳轉...
阻止預設行為dom中提供preventdefault()方法來取消事件預設行為,但是只有當cancelable屬性設定為true的事件,才可以使用preventdefault()來取消事件預設行為,使用event物件在事件函式中呼叫就行
ie中提供的是returnvalue屬性,預設為true,當它設定為false時,就是取消事件預設行為,也是用event物件在事件函式中呼叫
/*封裝阻止元素的預設行為函式
ie:returnvalue
dom:preventdefault
*/function
preventdefaultaction(event)
else
}
jquery中提供了preventdefault()方法來阻止元素的預設行為,只需要用event物件來呼叫就好,即event.preventdefault()
如果想同時對事件物件停止冒泡和預設行為,可以在事件處理函式中返回false。這是對事件物件同時呼叫stoppropagation()方法和preventdefault()方法的一種簡寫方式
阻止事件冒泡行為與事件預設行為
js 不支援相容性 阻止事件冒泡行為 什麼是冒泡事件?如 在乙個按鈕是繫結乙個 click 事件,那麼 click 事件會依次在它的父級元素中被觸發 stoppropagation就是阻止目標元素的事件冒泡到父級元素。function stopbubble e 阻止事件預設行 作用是取消乙個目標元素...
阻止事件冒泡和預設行為
在乙個物件上觸發某類事件 比如單擊onclick事件 如果此物件定義了此事件的處理程式,那麼此事件就會呼叫這個處理程式,如果沒有定義此事件處理程式或者事件返回true,那麼這個事件會向這個物件的父級物件傳播,從裡到外,直至它被處理 父級物件所有同類事件都將被啟用 或者它到達了物件層次的最頂層,即do...
阻止事件冒泡 和 阻止事件預設行為
1.event.stoppropagation 方法 這是阻止事件的冒泡方法,不讓事件向documen上蔓延,但是預設事件任然會執行,當你掉用這個方法的時候,如果點選乙個連線,這個連線仍然會被開啟,2.event.preventdefault 方法 這是阻止預設事件的方法,呼叫此方法是,連線不會被開...