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