阻止子元素繼承父元素事件具體思路及實(shí)現(xiàn)
更新時(shí)間：2013年05月02日 18:06:27 作者：
想要阻止點(diǎn)擊#p_cont區(qū)域時(shí)觸發(fā)a事件，需要在#p_cont區(qū)域內(nèi)加入阻止事件冒泡的代碼，具體實(shí)現(xiàn)祥看本文，希望對(duì)你有所幫助
復(fù)制代碼 代碼如下:
<div id="p_box" onclick="a()">
<div id=p_cont>
</div>
</div>
#p_box包括#p_cont,當(dāng)點(diǎn)擊#p_box區(qū)域任何位置時(shí)（包括#p_cont），都會(huì)觸發(fā)a事件。想要阻止點(diǎn)擊#p_cont區(qū)域時(shí)觸發(fā)a事件，需要在#p_cont區(qū)域內(nèi)加入阻止事件冒泡的代碼。
變成
復(fù)制代碼 代碼如下:
<div id="p_box" onclick="a()">
<div id="p_cont" onclick="stopBubble(this.id)">
</div>
</div>
function a(){
//這里是a事件的代碼
}
function stopBubble(e) {
if (e && e.stopPropagation) {//非IE瀏覽器
e.stopPropagation();
}
else {//IE瀏覽器
window.event.cancelBubble = true;
}
}
相關(guān)文章
詳解前端自動(dòng)化工具gulp自動(dòng)添加版本號(hào)
這篇文章主要介紹了詳解前端自動(dòng)化工具gulp自動(dòng)添加版本號(hào) ，非常具有實(shí)用價(jià)值，需要的朋友可以參考下。2016-12-12
這篇文章主要為大家介紹了JavaScript常見事件源與事件流的獲取方法及解析，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2023-05-05
這篇文章主要介紹了javascript自定義日期比較函數(shù)用法,涉及javascript日期相關(guān)轉(zhuǎn)換、運(yùn)算操作技巧,需要的朋友可以參考下2019-07-07
js采用concat和sort將N個(gè)數(shù)組拼接起來的方法
這篇文章主要介紹了js采用concat和sort將N個(gè)數(shù)組拼接起來的方法,涉及JavaScript針對(duì)數(shù)組的合并與排序操作相關(guān)技巧,需要的朋友可以參考下2016-01-01
這篇文章主要為大家詳細(xì)介紹了微信小程序使用視頻播放器video組件，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2021-04-04
JavaScript使用ZeroClipboard操作剪切板
這篇文章主要為大家詳細(xì)介紹了JavaScript使用ZeroClipboard操作剪切板的相關(guān)資料，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2017-05-05
bootstrap table插件動(dòng)態(tài)加載表頭
這篇文章主要為大家詳細(xì)介紹了bootstrap table插件動(dòng)態(tài)加載表頭，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2019-07-07
小程序云開發(fā)實(shí)現(xiàn)數(shù)據(jù)庫(kù)異步操作同步化
這篇文章主要為大家詳細(xì)介紹了小程序云開發(fā)實(shí)現(xiàn)數(shù)據(jù)庫(kù)異步操作同步化，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2019-05-05
javascript表單驗(yàn)證 - Parsley.js使用和配置
大家還記得我們?cè)?jīng)介紹過的表單驗(yàn)證jquery插件jquery.validationEngine吧;天介紹的Parsley同樣也可以幫助你只使用簡(jiǎn)單的配置即可實(shí)現(xiàn)表單驗(yàn)證功能，基于它的強(qiáng)大DOM-API,感興趣的你可以不要錯(cuò)過了哦2013-01-01
TypeScript內(nèi)置工具類型快速入門運(yùn)用
TypeScript 中內(nèi)置了很多工具類型，我們無需導(dǎo)入，可以直接使用。 其中的很多都是比較常用的，接下來我們根據(jù)使用范圍來一一介紹，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)吧2023-03-03