label标签内含有input元素,点击事件会触发两次
**label标签内含有input元素,点击事件会触发两次**
如果你的结构是label内写input实现点击文字时候input也有相应。并且,把事件设置在了label上,那么就会执行两次了。
//html: <label class="first"><input type="checkbox"/>第一</label> <br/> <label class="second"><span>第二</span></label> //jQuery $('.first').add('.second').off('click').on('click',function () { if ($(this).hasClass('selected')) { console.log(1); $(this).removeClass('selected'); } else { console.log(2); $(this).addClass('selected'); } }); //点击'first'标签,事件会触发两次,console结果为2和1 //点击'second'标签,事件触发一次,console结果为2/1
//html: <label class="first"><input type="checkbox"/>第一</label> <br/> <label class="second"><span>第二</span></label> //jQuery $('.first').add('.second').off('click').on('click',function () { if ($(this).hasClass('selected')) { console.log(1); $(this).removeClass('selected'); } else { console.log(2); $(this).addClass('selected'); } }); //点击'first'标签,事件会触发两次,console结果为2和1 //点击'second'标签,事件触发一次,console结果为2/1
解决方法:
1、取消事件的默认动作:event.preventDefault(); <label class="first"><input type="checkbox"/>第一</label> $('.first').off('click').on('click',function (event) { event.preventDefault(); if ($(this).hasClass('selected')) { console.log(1); $(this).removeClass('selected'); } else { console.log(2); $(this).addClass('selected'); } }); //点击'first'标签,事件触发一次,console结果为2/1
2、可以把事件绑定在input元素上。 <label class="first"><input type="checkbox" class="input"/>第一</label> $('.first .input').off('click').on('click',function (event) { event.preventDefault(); if ($(this).hasClass('selected')) { console.log(1); $(this).removeClass('selected'); } else { console.log(2); $(this).addClass('selected'); } }); //点击'first'标签,事件触发一次,console结果为2/1