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)我們點(diǎn)擊內(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)我們點(diǎn)擊內(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)點(diǎn)擊某個div打開層,點(diǎn)擊其他div關(guān)閉層實例分析(阻止冒泡)
相關(guān)文章
Jquery綁定事件(bind和live的區(qū)別介紹)
Jquery中綁定事件有三種方法click、bind、live第一種方法很好理解,其實就和普通JS的用法差不多,只是少了一個on而已第二、三種方法都是綁定事件2013-08-08淺談MVC+EF easyui dataGrid 動態(tài)加載分頁表格
下面小編就為大家?guī)硪黄獪\談MVC+EF easyui dataGrid 動態(tài)加載分頁表格。小編覺得挺不錯的,現(xiàn)在就分享給大家,也給大家做個參考。一起跟隨小編過來看看吧2016-11-11jQuery+PHP+MySQL實現(xiàn)無限級聯(lián)下拉框效果
這篇文章主要介紹了jQuery+PHP+MySQL實現(xiàn)無限級聯(lián)效果的相關(guān)資料,具有一定的參考價值,感興趣的小伙伴們可以參考一下2016-02-02