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
  • 相关阅读:
    Kubernetes如何支持有状态服务的部署?
    Web 安全入门-书籍及建议
    docker kubernetes swarm spring cloud结合学习资源
    docker-compose 完整打包发布, 多服务,多节点SPRING CLOUD ,EUREKA 集群
    Kubernetes权威指南学习笔记(一)
    解决k8s出现pod服务一直处于ContainerCreating状态的问题的过程
    Spark操作—aggregate、aggregateByKey详解
    maven设置------settings.xml文件学习
    Scala详细环境安装与配置
    内存泄露
  • 原文地址:https://www.cnblogs.com/jianglibaizhi/p/10573267.html
Copyright © 2011-2022 走看看