jQuery阻止冒泡和HTML默認(rèn)操作
2:在當(dāng)今的各個(gè)瀏覽器中都支持事件的冒泡,所謂的冒泡可以這樣理解:
事件:現(xiàn)在我們都在這兩個(gè)元素上綁定相同的事件,比如click事件。
結(jié)果:這時(shí),當(dāng)我們點(diǎn)擊內(nèi)層的P標(biāo)簽的時(shí)候,內(nèi)層元素的click事件觸發(fā),同時(shí)外層DIV的click事件也會(huì)觸發(fā)。
3:在HTML中有的元素被定義了一些默認(rèn)的屬性,比如說A元素,這個(gè)元素就是我們平時(shí)使用的超鏈接標(biāo)簽,這個(gè)標(biāo)簽的默認(rèn)屬性是實(shí)現(xiàn)頁(yè)面的跳轉(zhuǎn)。
4:在jQuery的每一個(gè)事件中都會(huì)有一個(gè)默認(rèn)的對(duì)象作為該事件的參數(shù)(但是必須顯示地被指定),這個(gè)對(duì)象就是event對(duì)象,它包含了一些屬性和方法,用于不同的場(chǎng)合。如下:
$('p:first').click(function(event){
//event對(duì)象可以使用了
});
5:有時(shí)我們不希望冒泡或默認(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層實(shí)現(xiàn)由大到小,由遠(yuǎn)及近動(dòng)畫變化效果
- jQuery實(shí)現(xiàn)單擊彈出Div層窗口效果(可關(guān)閉可拖動(dòng))
- jQuery實(shí)現(xiàn)DIV層收縮展開的方法
- jQuery實(shí)現(xiàn)鼠標(biāo)滑過Div層背景變顏色的方法
- jQuery實(shí)現(xiàn)DIV層淡入淡出拖動(dòng)特效的方法
- jquery鼠標(biāo)放上去顯示懸浮層即彈出定位的div層
- jQuery div層的放大與縮小簡(jiǎn)單實(shí)現(xiàn)代碼
- 基于jquery的模態(tài)div層彈出效果
- jQuery中阻止冒泡事件的方法介紹
- js阻止冒泡及jquery阻止事件冒泡示例介紹
- jquery阻止冒泡事件使用模擬事件
- jQuery實(shí)現(xiàn)點(diǎn)擊某個(gè)div打開層,點(diǎn)擊其他div關(guān)閉層實(shí)例分析(阻止冒泡)
相關(guān)文章
Jquery綁定事件(bind和live的區(qū)別介紹)
Jquery中綁定事件有三種方法click、bind、live第一種方法很好理解,其實(shí)就和普通JS的用法差不多,只是少了一個(gè)on而已第二、三種方法都是綁定事件2013-08-08淺談MVC+EF easyui dataGrid 動(dòng)態(tài)加載分頁(yè)表格
下面小編就為大家?guī)硪黄獪\談MVC+EF easyui dataGrid 動(dòng)態(tài)加載分頁(yè)表格。小編覺得挺不錯(cuò)的,現(xiàn)在就分享給大家,也給大家做個(gè)參考。一起跟隨小編過來看看吧2016-11-11文本框只能選擇數(shù)據(jù)到文本框禁止手動(dòng)輸入
文本框只能上人家選擇數(shù)據(jù)進(jìn)去,不能手動(dòng)輸入,經(jīng)搜索研究發(fā)現(xiàn)個(gè)不錯(cuò)的解決方法,感興趣的朋友可以參考下2013-11-11jQuery實(shí)現(xiàn)的可編輯表格完整實(shí)例
這篇文章主要介紹了jQuery實(shí)現(xiàn)的可編輯表格,結(jié)合完整實(shí)例形式分析了jQuery響應(yīng)鼠標(biāo)事件動(dòng)態(tài)操作頁(yè)面元素樣式與屬性的相關(guān)技巧,需要的朋友可以參考下2016-06-06jquery滾動(dòng)條插件jScrollPane的使用介紹
jScrollPane想必大家都不陌生吧它就是所謂的jquery滾動(dòng)條插件,下面為大家介紹下其具體的使用,感興趣的朋友不要錯(cuò)過2013-11-11使用jQuery實(shí)現(xiàn)簡(jiǎn)單穿梭框方式
這篇文章主要介紹了使用jQuery實(shí)現(xiàn)簡(jiǎn)單穿梭框方式,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2022-10-10jquery做的一個(gè)簡(jiǎn)單的屏幕鎖定提示框
這篇文章主要介紹了使用jquery做的一個(gè)簡(jiǎn)單的屏幕鎖定提示框,需要的朋友可以參考下2014-03-03jQuery+PHP+MySQL實(shí)現(xiàn)無限級(jí)聯(lián)下拉框效果
這篇文章主要介紹了jQuery+PHP+MySQL實(shí)現(xiàn)無限級(jí)聯(lián)效果的相關(guān)資料,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2016-02-02