ios和安卓的input的click事件和change事件的加载顺序问题。

最近开发webapp遇到一个问题 ,同一个input单选按钮,在安卓机里就可以实现与二级联动的效果(以及按钮不选,二级按钮为disabled),但是在ios里面效果实现不出来,因为逻辑稍微复杂,点击改变背景图片还要改变状态,还要监控其他单选按钮复选框,所以在一个radio上面绑定了click和change事件。

问题:安卓里面是先触发click事件,后触发change事件。但是IOS里面是先触发change事件再触发click事件。

click通用事件

var checked = "url('images/checked.png') no-repeat center/"+size+"rem "+size+"rem";//背景图片
    var check = "url('images/check.png') no-repeat center/"+size+"rem "+size+"rem";
    $("input[type=checkbox]").on("click",function(){
        var that = $(this).attr("checked");
        //判断当前点击按钮的状态
        if(that){
            //alert("click-check")
            $(this).css("background",check);
            $(this).removeAttr("checked");
        } else{
            //alert("click-checked")
            $(this).css("background",checked);
            $(this).attr("checked","checked");
        }
    });
    $("input[type=radio]").on("click",function(){
        //alert("单选框被点击!")
        var thatName = $(this).attr("name");
        $(this).css("background",checked).attr("checked","checked");
$(this).siblings("input[name="+thatName+"]").removeAttr("checked").css("background",check);
    });

针对元素的change事件

$(".nose").change(function () {
                var that = $(this);
                //这里加的定时器1ms就解决了IOS先出发change事件再触发click事件
                setTimeout(function () {
                    //alert("change");
                    if(that.attr("checked")=="checked"){
                        that.siblings("input.blood").removeAttr("disabled").css("background","url('images/check.png') no-repeat center/0.8rem 0.8rem")
                    }else{
                        that.siblings("input.blood").removeAttr("checked").attr("disabled","disabled").css("background","url('images/check.png') no-repeat center/0.8rem 0.8rem")
                    }

                },1)

                })
            });

其实问题倒是不难解决,关键是找到问题原因的过程是不简单的。

你可能感兴趣的:(前端开发,js)