jQuery阻止冒泡和HTML默認(rèn)操作
更新時間:2010年11月17日 20:40:38 作者:
jQuery是一個快捷簡便的JavaScript框架,說道框架可以直接理解為就是對原來底層的東西進(jìn)行了封裝使得開發(fā)者能夠利用這個框架快速開發(fā)。
1:jQuery是一個快捷簡便的JavaScript框架,說道框架可以直接理解為就是對原來底層的東西進(jìn)行了封裝使得開發(fā)者能夠利用這個框架快速開發(fā)。
2:在當(dāng)今的各個瀏覽器中都支持事件的冒泡,所謂的冒泡可以這樣理解:
條件:外層有一個DIV元素,在內(nèi)層有一個P元素,他兩存在這樣的關(guān)系:DIV是P元素的父元素,而P是外層DIV的子元素,他們之間存在包含和被包含的關(guān)系。
事件:現(xiàn)在我們都在這兩個元素上綁定相同的事件,比如click事件。
結(jié)果:這時,當(dāng)我們點擊內(nèi)層的P標(biāo)簽的時候,內(nèi)層元素的click事件觸發(fā),同時外層DIV的click事件也會觸發(fā)。
3:在HTML中有的元素被定義了一些默認(rèn)的屬性,比如說A元素,這個元素就是我們平時使用的超鏈接標(biāo)簽,這個標(biāo)簽的默認(rèn)屬性是實現(xiàn)頁面的跳轉(zhuǎn)。
4:在jQuery的每一個事件中都會有一個默認(rèn)的對象作為該事件的參數(shù)(但是必須顯示地被指定),這個對象就是event對象,它包含了一些屬性和方法,用于不同的場合。如下:
$('p:first').click(function(event){
//event對象可以使用了
});
5:有時我們不希望冒泡或默認(rèn)的事件發(fā)生,這樣就需要一些jQuery的的方法阻止冒泡和默認(rèn)的事件了。可以通過以下三種方法做到不同程度的阻止。
A:return false --->In event handler ,prevents default behavior and event bubbing 。
return false 在事件的處理中,可以阻止默認(rèn)事件和冒泡事件。
B:event.preventDefault()---> In event handler ,prevent default event (allows bubbling) 。
event.preventDefault()在事件的處理中,可以阻止默認(rèn)事件但是允許冒泡事件的發(fā)生。
C:event.stopPropagation()---> In event handler ,prevent bubbling (allows default behavior).
event.stopPropagation()在事件的處理中,可以阻止冒泡但是允許默認(rèn)事件的發(fā)生。
代碼如:
$('.menu li').click(function(){
$(this).find('ul').toggle();
return false;//去掉試試效果
})
事件:現(xiàn)在我們都在這兩個元素上綁定相同的事件,比如click事件。
結(jié)果:這時,當(dāng)我們點擊內(nèi)層的P標(biāo)簽的時候,內(nèi)層元素的click事件觸發(fā),同時外層DIV的click事件也會觸發(fā)。
3:在HTML中有的元素被定義了一些默認(rèn)的屬性,比如說A元素,這個元素就是我們平時使用的超鏈接標(biāo)簽,這個標(biāo)簽的默認(rèn)屬性是實現(xiàn)頁面的跳轉(zhuǎn)。
4:在jQuery的每一個事件中都會有一個默認(rèn)的對象作為該事件的參數(shù)(但是必須顯示地被指定),這個對象就是event對象,它包含了一些屬性和方法,用于不同的場合。如下:
$('p:first').click(function(event){
//event對象可以使用了
});
5:有時我們不希望冒泡或默認(rèn)的事件發(fā)生,這樣就需要一些jQuery的的方法阻止冒泡和默認(rèn)的事件了。可以通過以下三種方法做到不同程度的阻止。
A:return false --->In event handler ,prevents default behavior and event bubbing 。
return false 在事件的處理中,可以阻止默認(rèn)事件和冒泡事件。
B:event.preventDefault()---> In event handler ,prevent default event (allows bubbling) 。
event.preventDefault()在事件的處理中,可以阻止默認(rèn)事件但是允許冒泡事件的發(fā)生。
C:event.stopPropagation()---> In event handler ,prevent bubbling (allows default behavior).
event.stopPropagation()在事件的處理中,可以阻止冒泡但是允許默認(rèn)事件的發(fā)生。
代碼如:
$('.menu li').click(function(){
$(this).find('ul').toggle();
return false;//去掉試試效果
})
您可能感興趣的文章:
- jQuery控制DIV層實現(xiàn)由大到小,由遠(yuǎn)及近動畫變化效果
- jQuery實現(xiàn)單擊彈出Div層窗口效果(可關(guān)閉可拖動)
- jQuery實現(xiàn)DIV層收縮展開的方法
- jQuery實現(xiàn)鼠標(biāo)滑過Div層背景變顏色的方法
- jQuery實現(xiàn)DIV層淡入淡出拖動特效的方法
- jquery鼠標(biāo)放上去顯示懸浮層即彈出定位的div層
- jQuery div層的放大與縮小簡單實現(xiàn)代碼
- 基于jquery的模態(tài)div層彈出效果
- jQuery中阻止冒泡事件的方法介紹
- js阻止冒泡及jquery阻止事件冒泡示例介紹
- jquery阻止冒泡事件使用模擬事件
- jQuery實現(xiàn)點擊某個div打開層,點擊其他div關(guān)閉層實例分析(阻止冒泡)
相關(guān)文章
jQuery基礎(chǔ)的工廠函數(shù)以及定時器的經(jīng)典實例分析
下面小編就為大家?guī)硪黄猨Query基礎(chǔ)的工廠函數(shù)以及定時器的經(jīng)典實例分析。小編覺得挺不錯的,現(xiàn)在2016-05-05
jQuery插件MovingBoxes實現(xiàn)左右滑動中間放大圖片效果
本篇文章主要介紹jQuery中MovingBoxes左右滑動放大圖片插件示例,實現(xiàn)左右滑動和放大效果,有興趣的可以了解一下。2017-02-02
jquery對所有input type=text的控件賦值實現(xiàn)方法
下面小編就為大家?guī)硪黄猨query對所有input type=text的控件賦值實現(xiàn)方法。小編覺的挺不錯的,現(xiàn)在就分享給大家,也給大家做個參考。一起跟隨小編過來看看吧2016-12-12
通過jquery 獲取URL參數(shù)并進(jìn)行轉(zhuǎn)碼
本節(jié)主要介紹了通過jquery 獲取URL參數(shù)并進(jìn)行轉(zhuǎn)碼,需要的朋友可以參考下2014-08-08
formvalidator驗證插件中有關(guān)ajax驗證問題
jquery formvalidator插件是不錯的國產(chǎn)驗證插件了,做點普通的校驗也是很方便的,但最近遇到個問題,發(fā)現(xiàn)如果表單整個表單是AJAX提交時,就不能按傳統(tǒng)的做法了2013-01-01
jQuery對象和Javascript對象之間轉(zhuǎn)換的實例代碼
jQuery對象和Javascript對象之間轉(zhuǎn)換的實例代碼,需要的朋友可以參考一下2013-03-03

