有的時候，我們需要監聽label點選事件和input點選事件，如下所示：

         <label id="checkbox"  data-role="checkbox"> 

<input id="storepwd"  type="checkbox" >

       </label>

  我們希望點選label，checkbox能夠被監聽

$(this).find("label").on("click", function(d) {
var g = $(this);
var f = g.data("role");
if (f === "checkbox") {
if (g.hasClass("active")) {
g.removeClass("active").find("input[type=checkbox]").prop("checked", false);
} else {
g.addClass("active").find("input[type=checkbox]").prop("checked", true);
}
} 
});

 當我們點選label時，如上監聽能夠正常執行，但是當我們點選input時，發現如上監聽執行了兩次，這是什麼原因呢？

 檢視label說明就知道，label 元素不會向用戶呈現任何特殊效果。不過，它為滑鼠使用者改進了可用性。如果您在 label 元素內點選文字，就會觸發此控制元件。就是說，當用戶選擇該標籤時，瀏覽器就會自動將焦點轉到和標籤相關的表單控制元件上。

解決辦法:

 在這裡，我們對點選事件進行攔截，經測試，此處共有兩個tagName

                 $(this).find("label").on("click", function(d) {

var ev = d || window.event;

        var elm = ev.target || ev.srcElement;
if (elm.tagName === 'SMALL' || elm.tagName === 'B') {// label點選攔截
return;
}
var g = $(this);
var f = g.data("role");
if (f === "checkbox") {
if (g.hasClass("active")) {
g.removeClass("active").find("input[type=checkbox]").prop("checked", false);
} else {
g.addClass("active").find("input[type=checkbox]").prop("checked", true);
}
} 
});

 經過測試，點選label下的input,執行正常。