在jquery里踩过的坑

Posted 2020-10-04

自己犯过的错

一、parent()和parents()

parent(selector)指的是直系父元素

parents(selctor)指的是沿DOM向上查找所有父元素

 二、ie8中兼容jquery的input事件（jquery1.11.3版本）

需求是实时监听输入框值变化，用的input[event]，做兼容性测试时发现在ie8下没有作用，好像是ie9以下没有input事件，解决方案：同时使用 input 和 两种事件。

$("input").on("input propertychange",function(){
   ... 
})

 三、写十秒倒计时

原来用的是setInterval,然后清除掉，觉得并不适合。这次用setTimenout写的，会在效率和写法上更合适。

//设定倒数秒数  
var t = 10;  
//倒计时
function time(){  
    t -= 1;  
    document.getElementById(‘times‘).innerhtml= t;  
    if(t==0){  
        location.href=‘https://www.cnblogs.com/‘;  
    }  
    setTimeout("time()",1000);  
}
time();

 四、兼容html5

写完之后测试不兼容ie8，特别是@media，心塞啊

 <!--[if lt IE 9]>
    <script src="https://cdn.bootcss.com/html5shiv/3.7.3/html5shiv.min.js"></script>
    <script src="https://cdn.bootcss.com/respond.js/1.4.2/respond.min.js"></script>
<![endif]-->

解决方案，来自bootstrap。加的时候发现这段代码需要加载样式之后。

五、使用jquery的e.stopPropagation()无效

div.div1.事件1
    div.div2.无事件
        div.div3.事件3

层级和事件关系如上。需求是点击div2的时候没有任何事件，点击div1和div3分别有事件。

直接写

$(".div3").on("click",function(){e.stopPropagation()});

e.stopPropagation()并没有生效。最后实践得出：

$(".div1").on("click",function(){...});
$(".div1").on("click",".div3",function(){e.stopPropagation()});

。。。还有问题TT

六、监控窗口的滚动（jquery1.11.3版本）

正常使用$(document).on("scroll",function(){})即可，但是测试发现在ie8下无效，改成$(window).on("scroll",function(){})，就好了，不是很理解。