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

 


免责声明!

本站转载的文章为个人学习借鉴使用,本站对版权不负任何法律责任。如果侵犯了您的隐私权益,请联系本站邮箱yoyou2525@163.com删除。



 
粤ICP备18138465号  © 2018-2025 CODEPRJ.COM