zoukankan      html  css  js  c++  java
  • 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
  • 相关阅读:
    利用SqlBulkCopy快速大批量导入数据
    未能完成操作,无效的FormATETC结构
    JS编码和Asp.net编码
    Sql分页两种常用算法
    Subsonic.exe 生成数据访问层代码,报“从索引 0 处开始,初始化字符串的格式不符合规范”错误解决办法
    Asp.Net,代码实现页面输出缓存
    JS中all Collection 的几个方法
    注册、反注册dll,regsvr32命令详解
    ASP.NET页面传值汇总(Session/Server.Transfer/Query String/Cookie/Application)
    表格导出EXCEL
  • 原文地址:https://www.cnblogs.com/jianglibaizhi/p/10573267.html
Copyright © 2011-2022 走看看