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
  • 相关阅读:
    从零开始学VUE之组件化开发(组件数据的存放)
    从零开始学VUE之组件化开发(组件分离写法)
    从零开始学VUE之组件化开发(语法糖优化组件注册)
    进程与线程的一个简单解释
    Crontab爬虫定时执行
    接口分类复习
    最长公共子串
    最长公共子序列(力扣第1143题)
    Reduce端分组排序源码分析
    Job提交流程源码和切片源码详解
  • 原文地址:https://www.cnblogs.com/jianglibaizhi/p/10573267.html
Copyright © 2011-2022 走看看