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
  • 相关阅读:
    linux上mysql安装详细教程
    druid部署
    druid.io本地集群搭建 / 扩展集群搭建
    CentOS7.1.x+Druid 0.12 集群配置
    Python小项目四:实现简单的web服务器
    hadoop学习---运行第一个hadoop实例
    Hadoop集群完全分布式坏境搭建
    mysql备份与恢复
    mysql登录的三种方式
    nginx代理,负载均衡
  • 原文地址:https://www.cnblogs.com/jianglibaizhi/p/10573267.html
Copyright © 2011-2022 走看看