關於label的點選事件 原創

2022-09-04 13:27:11 字數 3343 閱讀 7214

通常做網頁時不會用radio和checkbox的原有樣式,通常會進行樣式美化,手機端我用的jqurey weui框架,他的原理是這樣的:

<

label

class

="check_label"

for="sort_4"

>

<

input

type

="radio"

class

="weui_check"

name

="sort"

id="sort_4"

>

<

i class

="weui_icon_checked"

>price low to high

i>

label

>

<

style

>

.check_label

.weui_check

style

>

將input移出螢幕,樣式加在i標籤上,在電腦端我自己寫**的時候出現個問題:

.weui_check

時,當input被選中時,螢幕居然詭異的聚焦至這個input,跳出了原頁面;當我改成:

.weui_check

主要談談label的點選事件中遇到的坑,(jq寫的):

<

label

class

="check_label"

for="sort_4"

>

<

input

type

="radio"

class

="weui_check"

name

="sort"

id="sort_4"

>

<

i class

="weui_icon_checked"

>price low to high

i>

label

>

$("label").on("click",function())

原本想給其後邊的元素新增個toggle事件,就是如果顯示就收起,收起就顯示;這下好,點了後,就展開後馬上收起。。。

什麼鬼,不知道**出啥問題了,console.log()後發現,被執行了兩次!!

點選label後,點選事件會trigger(觸發了)label的for的那個input,以上**,是正好是其內部的input的click事件(來觸發被選中或未被選中事件),然後input的點選事件,冒泡至父級label上,所以導致了兩次點選的情況。

我的解決思路:

1.改變結構,將input從label便簽中取出放在別的地方:

<

label

class

="check_label"

for="sort_4"

>

<

i class

="weui_icon_checked"

>price low to high

i>

label

>

<

input

type

="radio"

class

="weui_check"

name

="sort"

id="sort_4"

>

$("label").on("click",function())

親測可行,只執行了一次,上述的原因判斷應該是正確的!

1.在不改變原有結構的情況下,因為我label裡邊的i標籤實際是充滿label的,所以將點選事件加在i上(坑來了):

<

label

class

="check_label"

for="sort_4"

>

<

input

type

="radio"

class

="weui_check"

name

="sort"

id="sort_4"

>

<

i class

="weui_icon_checked"

>price low to high

i>

label

>

$("i").on("click",function())

我去!坑來了,完全沒有用,console中什麼都沒輸出,出了什麼事???

再改:

<

label

class

="check_label"

for="sort_4"

>

<

input

type

="radio"

class

="weui_check"

name

="sort"

id="sort_4"

>

<

i class

="weui_icon_checked"

>price low to high

i>

label

>

$("label").children().on("click",function())

我去!執行了,而且是執行了一次!

什麼鬼?噢噢噢...應該是label觸發了input的click事件,所以執行了!

再改:

<

label

class

="check_label"

for="sort_4"

>

<

input

type

="radio"

class

="weui_check"

name

="sort"

id="sort_4"

>

<

i class

="weui_icon_checked"

>price low to high

i>

label

>

$("label input").on("click",function())

成功執行!上述判斷是正確的!

我那個去,那問題來了,放在label便簽中的所有的元素,你其實是點不到的!你其實是點不到的!你其實是點不到的!

親測:確實是這樣!!

有時間去探索具體原因了!知其然,標記下!

如有錯誤!歡迎指正!

點選label出發兩次點選事件

我把input框寫在label標籤裡面,出發兩次點選事件 label class checked label input type radio name pay type label label click function 原因 在使用者選擇label標籤是,瀏覽器就會自動把焦點轉到和標籤相關的表...

collectionView關於點選事件

void collectionview uicollectionview collectionview diddeselectitematindexpath nsindexpath indexpath void collectionview uicollectionview collectionvi...

關於委託和事件的示例(原創)

關於委託和事件,許多高手都已經對此進行了很詳盡的描述,昨晚突然想到乙個情景,於是今天寫了這個委託和事件的例子出來,純粹是為了練習一下,也希望這篇隨筆對您有幫助!情景大概是這樣的 有乙個老師,他教好幾個班級,然後每次考試後,他都會小小懲罰成績低於幾個班級成績的平均分的同學,同學們自然會很怕受罰啊,考完...