一、由於某些特殊情況下,需要用到事件委託,比如給動態建立的dom繫結click事件,這裡就需要事件委託(這裡就牽扯到:目標元素和**元素)
目標元素:動態建立的元素,最終click事件需要繫結到該元素
**元素:動態建立的元素的父級元素,或者document,body等。
二、bug情況
當使用事件委託給【目標元素】新增 click 事件時,如果【**元素】是 document或body,並且【目標元素】是預設不可點選的(如 div, span 等),此時click事件會失效。如果【目標元素】是可點選的(比如 button、a 標籤),此時click事件還是有效的。
三、解決方案3種
1、【**元素】可以是【目標元素】的父級元素,document,body等,但【目標元素】必須為a或者button可點選的標籤。
盡量使用touch事件或者tap事件,如果你需要click事件的延遲效果來達到某些互動,盡量把click事件繫結在a或者button可點選的標籤上。
2、【**元素】必須是【目標元素】的非document,body父級元素,【目標元素】可以是任意標籤。
將click事件委託到非document或body的父級元素上。
3、【**元素】可以是【目標元素】的父級元素,document,body等,【目標元素】可以是任意標籤,但是要設定cursor: pointer;。
出現上述點選事件失效的問題,讓我們不得不體會到標籤語義化的重要性,於是這裡建議大家寫**時,【目標元素】多用a或者button可點選的標籤,【**元素】多用非document,body父級元素。
本人摘自:
關於事件委託
首先,先來看乙個例子 如微博,每一條博文都有事件,如增加 刪除等!這樣子的話我們每次發微博的時候就得在建立的時候把該有的事件給加上。html js var otext document.getelementbyid txt1 var obtn document.getelementbyid btn1...
關於前端click事件的坑
對於click事件的繫結,一直是繫結下就可以了,但是在用jquery fileupload外掛程式做檔案上傳的時候,每選擇一次檔案就會觸發add屬性對應的函式,導致多次繫結了click時間,一直多次呼叫後台上傳檔案,怎麼查都找不到原因,最後才發現多次繫結click事件後,全部都會執行,而不是只執行最...
關於委託和事件
委託 delegate 是一種資料結構,它引用靜態方法或引用類例項及該類的例項方法。它宣告定義一種引用型別,該型別可用於將方法用特定的簽名封裝。委託例項封裝靜態方法或例項方法。委託大致類似於 c 中的函式指標 但是,委託是型別安全和可靠的。宣告採用下列形式 attributes modifiers ...