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

来源:互联网 发布:python arff 读取 编辑:程序博客网 时间:2024/06/13 08:02

最近开发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)                })            });

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

原创粉丝点击