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
  • 相关阅读:
    SpringMVC源码分析--HandlerMappings
    你真的懂wait、notify和notifyAll吗
    深入理解DefaultMessageListenerContainer
    起步
    ZOJ 3827 Information Entropy (2014牡丹江区域赛)
    Spring简化配置
    对于一个IE8兼容性问题的反思
    xcode7.1.1不能真机调试ios9.2系统设备的解决方法
    CSS3怎样实现超出指定文本以省略号显示效果
    网易2016年研发project师编程题(2)
  • 原文地址:https://www.cnblogs.com/jianglibaizhi/p/10573267.html
Copyright © 2011-2022 走看看