第一種event.stopPropagation(); 阻止事件冒泡

十余年的柏鄉網站建設經驗,針對設計、前端、開發、售后、文案、推廣等六對一服務,響應快,48小時及時工作處理。全網營銷推廣的優勢是能夠根據用戶設備顯示端的尺寸不同,自動調整柏鄉建站的顯示方式,使網站能夠適用不同顯示終端,在瀏覽器中調整網站的寬度,無論在任何一種瀏覽器上瀏覽網站,都能展現優雅布局與設計,從而大程度地提升瀏覽體驗。創新互聯公司從事“柏鄉網站設計”,“柏鄉網站推廣”以來,每個客戶項目都認真落實執行。
第二種event.preventDefault() 阻止默認事件的冒泡
最簡單的做法是阻止冒泡,但是stopPropagation不一定有用,這時候可以試試stopImmediatePropagation
我比較喜歡solution4:
$(document).on('pagebeforeshow', '#index', function(){
$(document).on('click', '#test-button',function(e) {
if(e.handled !== true) // This will prevent event triggering more then once
{
alert('Clicked');
e.handled = true;
}
});
});
在一個對象上觸發某類事件(比如單擊onclick事件),如果此對象定義了此事件的處理程序,那么此事件就會調用這個處理程序,如果沒有定義此事件處理程序或者事件返回true,那么這個事件會向這個對象的父級對象傳播,從里到外,直至它被處理(父級對象所有同類事件都將被激活),或者它到達了對象層次的最頂層,即document對象(有些瀏覽器是window)。所以有些時候需要阻止冒泡。
工具原料:編輯器、瀏覽器
方式一:event.stopPropagation();
$("#div1").mousedown(function(event){
event.stopPropagation();
});
方式二:return false;
$("#div1").mousedown(function(event){
return?false;
});
但是這兩種方式是有區別的。return false 不僅阻止了事件往上冒泡,而且阻止了事件本身。event.stopPropagation() 則只阻止事件往上冒泡,不阻止事件本身。
什么是事件冒泡:在一個對象上觸發某類事件(比如onclick事件),如果次對象定義了此事件的處理程序,那么此事件就會調用這個處理程序,如果沒有定義此事件處理程序或者事件返回true,那么這個事件會向這個對象的父級對象傳播,從里到外,直至它被處理(父級對象所有同類事件都將被激活),或者它到達了對象層次的最頂層,即document對象(有些瀏覽器是window)。
事件冒泡的作用:事件冒泡允許多個操作被集中處理(把事件處理器添加到一個父級元素上,避免把事件處理器添加到多個子級元素上),它還可以讓你在對象層的不同級別捕獲事件。
阻止事件冒泡:事件冒泡機制有時候是不需要的,需要阻止掉,通過 event.stopPropagation() 來阻止
$(function(){
})
代合并阻止操作:實際開發中,一般把阻止冒泡和阻止默認行為合并起來寫,合并寫法可以用.
// event.stopPropagation();
// event.preventDefault();
// 合并寫法:
return false;
事件委托就是利用冒泡的原理,把事件加到父級上,通過判斷事件來源的子集,執行相應的操作,事件委托首先可以極大減少事件綁定次數,提高性能;其次可以讓新加入的子元素也可以擁有相同的操作。
一般綁定事件的寫法:bind
事件委托的寫法:
如果我們要取消事件的委托:
//ev.delegateTarge 委托的對象
$(ev.delegateTarge).undelegatee();
//如果是上面的兩種例子可使用//$list.undelegate();
創建節點: ('div')
var ('div這是一個div元素/div');
插入節點:
1、append()和appendTo():在現存元素的內部,從后面插入元素
2、prepend()和prependTo():在現存元素的內部,從前面插入元素
3、after()和insertAfter():在現存元素的外部,從后面插入元素
4、before()和insertBefore():在現存元素的外部,從前面插入元素
刪除節點
$('#div1').remove();
1)什么是事件起泡
首先你要明白一點,當一個事件發生的時候,該事件總是有一個事件源,即引發這個事件的對象,一個事件不能憑空產生,這就是事件的發生。
當事件發生后,這個事件就要開始傳播。為什么要傳播呢?因為事件源本身并沒有處理事件的能力。例如我們點擊一個按鈕時,就會產生一個click事件,但這個按鈕本身不能處理這個事件(廢話),事件必須從這個按鈕傳播出去,從而到達能夠處理這個事件的代碼中(例如我們給按鈕的onclick屬性賦一個函數的名字,就是讓這個函數去處理該按鈕的click事件)。
當事件在傳播過程中,找到了一個能夠處理它的函數,這時候我們就說這個函數捕捉到了這個事件。
說到這里,關鍵的問題來了,那就是一個函數是如何捕捉一個事件的呢?這就涉及到事件的冒泡了。
為了更好地理解冒泡的概念,我建議你現在想象一下你的面前放著一杯水,但這杯水和我們平時看到的有點點不同,它分為數層,每一層又分成一或多個區域,最頂層是我們熟悉的窗口對象(即window對象),下一層分為好幾個區域(document對象、history對象等等),而document對象的下一層又分為多個子對象。
這些對象的層次關系構成了DOM中的對象樹。
事件的傳播是有方向的,當點擊一個按鈕時所產生的事件從這個按鈕處開始向上傳播(就像一個水泡從杯底冒上來,這就是之所以叫事件冒泡的原因),但這個事件總是尋找特定的屬性是否有值。例如按鈕的click事件先尋找在按鈕上是否有onclick屬性的有意義的定義(即該屬性指向一個存在的函數或一段可執行的語句),如果有,執行這個函數或語句;然后事件繼續向上傳播,到達按鈕的上一層對象(例如一個form對象或document對象,總之是包含了按鈕的父對象),如果該對象也定義了onclick屬性,則執行屬性的值。
所以,如果這個按鈕上面有3層(form、document、window),且這三層都定義了onclick屬性,則當按鈕的click事件產生時,將會調用4個(包括按鈕本身的一個)函數或執行4段語句。
事件的這幾個特性在0級dom中也是適用的。
(2)jquery阻止事件起泡實例
1、通過返回false來取消默認的行為并阻止事件起泡。
jQuery 代碼:
復制代碼代碼如下:
$("form").bind(
"submit",
function() {
return false;
}
);
2、通過使用 stopPropagation() 方法只阻止一個事件起泡。
jQuery 代碼:
復制代碼代碼如下:
$("form").bind(
"submit",
function(event){
event.stopPropagation();
}
);
jquery提供了一個只觸發一次點擊的方法\x0d\x0aobj.one(function(){\x0d\x0a\x0d\x0a});\x0d\x0a或者用obj.unbind("click")取消點擊事件
網頁名稱:jquery事件阻止,jq如何阻止事件捕獲
網頁URL:http://www.yijiale78.com/article26/dschejg.html
成都網站建設公司_創新互聯,為您提供App設計、靜態網站、網站改版、品牌網站建設、網站建設、微信小程序
聲明:本網站發布的內容(圖片、視頻和文字)以用戶投稿、用戶轉載內容為主,如果涉及侵權請盡快告知,我們將會在第一時間刪除。文章觀點不代表本網站立場,如需處理請聯系客服。電話:028-86922220;郵箱:631063699@qq.com。內容未經允許不得轉載,或轉載時需注明來源: 創新互聯