IE bug记录

来源：互联网发布：拳皇13pc版出招优化编辑：程序博客网时间：2024/05/24 07:05

今天是个悲催的日子，chrome实现的非常好，到了IE确实异常痛苦，调了一天，终于调好了。有必要对此进行记录。

html部分代码：

<div class="search" data-city="{{$city}}">      <form class="index-search" action="/bj/ershouche">          <input placeholder="请输入关键词，如：别克 1.6L" name="keyword" class="search-text" autocomplete="off" id="search_text">          <div class="search-button"><button class="search-submit"></button></div>      </form></div>

js部分代码：

var city = $(".search").data('city');    var selectedItem = -1;    var index_search_content = $('<div class="index-search-content"></div>').hide().insertAfter('.index-search');    var searchInput = $('#search_text');    var clear = function(){        setTimeout(function () {            index_search_content.empty().hide();            setSelectedItem(0);        }, 500);            };    var setSelectedItem = function(item){        //更新索引變量        selectedItem = item ;        //按上下鍵是循環顯示的，小於0就置成最大的值，大於最大值就置成0        if(selectedItem < 0){            selectedItem = index_search_content.find('.list').length - 1;        }else if(selectedItem > index_search_content.find('.list').length-1 ) {            selectedItem = 0;        }        //首先移除其他列表項的高亮背景，然後再高亮當前索引的背景        index_search_content.find('.list').removeClass('hover').eq(selectedItem).addClass('hover');    };    $(".search-text").on('focus', function (evt) {        $(this).data('editing', true);        $.getJSON("/index.php?d=api&c=car_search&m=index&type=get_hot_info", function(result) {            index_search_content.empty();            $('<span class="list-title">大家都在搜</span>').appendTo(index_search_content);            if (result.status === 0 && result.data) {                $.each(result.data, function(key,val) {                                    $('<span class="list"><a class="list-url" href="/'+ city +'/ershouche?keyword=' + val +'">' + val + '</a></span>').appendTo(index_search_content)                        .hover(function() {                            $(this).siblings('span').removeClass('hover');                            $(this).addClass('hover');                        }, function() {                            $(this).removeClass('hover');                            selectedItem = -1;                        });                });            }        });                $(this).css({'border':'1px solid #e14800', 'border-right':'none', 'outline':'0'});        $('.search-button').css({'border':'1px solid #e14800', 'border-left':'1px solid #ccc'});        $(".index-search-content").css('display', 'block');            }).on('propertychange', function (evt) {        if ($(this).val() && $(this).data('editing')) {            var url = "/index.php?d=api&c=car_search&m=index&type=get_info&words="+encodeURIComponent($(this).val()) + "&num=" +Math.round(Math.random()*1000000)            $.getJSON(url, function(result) {                index_search_content.empty();                if (result.status === 0 && result.data) {                    $.each(result.data, function(key, val) {                        $('<span class="list"><a class="list-url" href="/'+ city +'/ershouche?keyword=' + val +'">' + val + '</a></span>').appendTo(index_search_content)                            .hover(function (evt) {                                $(this).siblings('span').removeClass('hover');                                $(this).addClass('hover');                            }, function() {                                $(this).removeClass('hover');                                selectedItem = -1;                            }).click(function(event) {                                selectedItem = -1;                            });                                                                       });                } else if (result.status === -1 && result.data) {                    $.each(result.data, function(key, val) {                        $('<span class="list-title">' + val + '</span>').appendTo(index_search_content);                    });                }            });                          $(this).data('editing', true);        }    }).on('input', function (evt) {                $.getJSON("/index.php?d=api&c=car_search&m=index&type=get_info&words="+encodeURIComponent($(this).val()), function(result) {            index_search_content.empty();            if (result.status === 0 && result.data) {                $.each(result.data, function(key, val) {                    $('<span class="list"><a class="list-url" href="/'+ city +'/ershouche?keyword=' + val +'">' + val + '</a></span>').appendTo(index_search_content)                        .hover(function() {                            $(this).siblings('span').removeClass('hover');                            $(this).addClass('hover');                        }, function() {                            $(this).removeClass('hover');                            selectedItem = -1;                        }).click(function(event) {                            selectedItem = -1;                        });                });            } else if (result.status === -1 && result.data) {                $.each(result.data, function(key, val) {                    $('<span class="list-title">' + val + '</span>').appendTo(index_search_content);                });            }                    });      }).on('blur', function (evt) {        clear();                $(this).css({'border':'1px solid #ccc', 'border-right':'none'});        $('.search-button').css({'border':'1px solid #ccc', 'border-left':'1px solid #ccc'});        $(this).data('editing', false);    });    searchInput.keyup(function(event) {        var e = window.event || event;                if( event.keyCode == 40 || event.keyCode == 38) {            $(".search-text").data('editing', false);        }        if( event.keyCode == 46 || event.keyCode == 8) {            $(".search-text").data('editing', true);        }        if(e.keyCode == 40) {            if(selectedItem == -1) {                setSelectedItem(0);            } else {                setSelectedItem(selectedItem +1);            }            $('.list:eq(' + selectedItem + ')').addClass('hover').siblings('span').removeClass('hover');            $('.search-text').val($('.list:eq(' + selectedItem + ')').text());        } else if (e.keyCode == 38) {            if(selectedItem < 0) {                setSelectedItem(index_search_content.find('.li').length -1);            } else {                setSelectedItem(selectedItem - 1);            }            $('.list:eq(' + selectedItem + ')').addClass('hover').siblings('span').removeClass('hover');            $('.search-text').val($('.list:eq(' + selectedItem + ')').text());        }    });

技巧一：

$(‘<span>’).appendto(),，好处胜过（）.append(span),

原因分析：可以在后面加上hover click等常见事件，而append则需要在外面重新查找span元素进行加载。

Bug one:

Ie进行ajax处理时，通过fidder发现，会有一系列相同请求，很快导致ie崩溃。不仅崩溃，index_search_content中的a标签不能点击跳转。

原因分析：ajax为异步调用，一系列相同请求，会导致index_search_content中无法正确加载a标签，从而使a标签无法绑定点击事件，跳转失败。

解决办法：在ajax请求的url后面，加上 &num=Math.random()*1000000; 加上随机参数，如此ajax就不会加载n个相同的请求，保证了index_search_content中的数据正确加载。

Bug two:

Propertychange与input

在ie中监听input元素变化，可以使用事件propertychange,而chrome中则是input.

但是在iepropertychange中，有个bug。

原因分析：当有个功能为使用上下键移动index_search_content中span时，会将所选择的span中的文字添加到input中，在ie中，这种行为也会认定为是输入框改变，而在chrome中，则只有想input中打字才会认定为是输入框改变。

解决方法：当键盘发生上下操作时，将输入框加上一个数据，如$(‘input’).data(‘editing’,’false’)。在对propertychange进行事件处理时，判断editing的值，为真，则进行ajax的处理，否则不执行ajax处理。

0 0