Jquery click label to trigger twice, and jquerylabel to trigger twice

Jquery click label to trigger twice, and jquerylabel to trigger twice

When a label is clicked during the questionnaire writing today, the click Event of the listener is executed twice. Why... Event bubbling

<Div class = "questionBox checkBox"> <div class = "title"> 2. How do you understand the importance of innovation consciousness? </Div> <div class = "checkBoxList" data-more = "2"> <label> <input type = "checkbox"/> <span> innovation consciousness is a must for work </span> </label> <input type = "checkbox"/> <span> innovation consciousness is a must for Work </span> </label> <label> <input type = "checkbox"/> <span> innovation consciousness is a must for Work </span> </label> <input type = "checkbox"/> <span> innovation consciousness is a must for Work </span> </label> <input type = "checkbox"/> <span> innovation consciousness is a must for Work </span> </label> </div> <input type = "text" class = "text" placeholder = "enter other comments here"/> </div>

$ (". CheckBoxList label "). click (function () {var more = $ (this ). parent (". checkBoxList "). attr ("data-more"); var length = $ (this ). parent (". checkBoxList "). find ("label "). length; var NowCheck = 0; for (I = 0; I <length; I ++) {if ($ (this ). parent (". checkBoxList "). find ("label "). eq (I ). find ("input "). prop ("checked") = true) {pass = "1" NowCheck = NowCheck + 1} if (NowCheck> more) {alert ("this question can be selected at most" + more + ")}})

Then I found the method...

Method 1: Throw the label...

Method 2

Recognize only input, identify the event source as input (this is a solution posted on the Internet) http://www.cnblogs.com/feng524822/p/4084037.html

 

/*** Indicates whether the input descendant Element of an id * @ param {Element} the Element to be judged by elm * @ param {String} id to be matched * @ return {Boolean} */function hasInput (elm, id) {for (var I = 0, inputs = elm. getElementsByTagName ("input"), len = inputs. length; I <len; I ++) {if (inputs [I]. id = id) {return true;} return false ;} /*** determine whether the label under an Element has an associated input * @ param {Element} the Element to be judged by elm * @ param {Element} label Element * @ return {Boolean} */Function isLabelhasRelativeInput (elm, label) {if (label. getElementsByTagName ("input "). length) {return true;} var forT = label. getAttribute ("for"); var isIE6 =! -[1,] &! Window. XMLHttpRequest; // IE6 does not support the for Attribute if (forT & hasInput (elm, forT )&&! IsIE6) {return true;} return false;} document. getElementById ("test "). onclick = function (e) {var ev = e | window. event; var srcElm = ev.tar get | ev. srcElement; if (srcElm. tagName = 'label' & isLabelhasRelativeInput (this, srcElm) {return ;}// do something ;}

... I'm a little drunk.

Then method 3...

It can be determined by the time stamp triggered by the event. In fact, all problems related to event bubbling can be handled through this method. Security and pollution-free

1    var evTimeStamp = 0;2     document.getElementById("test").onclick = function(e) {3         var now = +new Date();4         if (now - evTimeStamp < 100) {5             return;6         }7         evTimeStamp = now;8         console.log(2);9     }

 

Let's get to the end... I still want to throw the label... HOHOHO

$ (". CheckBoxList label input "). click (function () {var more = $ (this ). parents (". checkBoxList "). attr ("data-more"); var length = $ (this ). parents (". checkBoxList "). find ("label "). length; var NowCheck = 0; for (I = 0; I <length; I ++) {if ($ (this ). parents (". checkBoxList "). find ("label "). eq (I ). find ("input "). prop ("checked") = true) {pass = "1" NowCheck = NowCheck + 1} if (NowCheck> more) {alert ("this question can be selected at most" + more + ")}})

 

 

I haven't been bubbling for a long time ~~~ Recently, I have absorbed knowledge like a sponge. React is also very popular !!! Occasionally write down the PHP interface. Create a mall... And a chat room... Okay... Continue to work,

Finally, I wish all programmers who are still coding for the dragon boat festival a successful career.