解决多个window.onscroll覆盖的问题

默认一个页面只能同时存在一个window.onscroll函数。有的时候我们会引入工具的js框架,在框架中使用onscroll统一监听每个页面,但是在某个页面,我们可能还要使用onscroll来监控滚动条,完成具体某个业* I p $ 4 Q h务逻辑,这是该怎么做呢?

方法1:

只适用有两个滚动事件共存时适用,当有多个的时候1 A & t $推荐使用这个方法,有多个会被覆盖

window.onscroll=function(){ //默认一个页面只能同时存在一个window.onscroll函数
console.log(11);
}
var oldMetho^ h f & ;d = window.onscroll; //当使用多个时建议使用这个方法或下面的方法
if(typeof oldMethod == 'function'){
window.P S 9 ] | & |onscroll = function(){
oldMethod.call/ ) m Z(this);
console.log(22);
}

}

方法2:r $ l ~ H

function addEver Q % A W M # p jnt(obj,type,fn){
if(obj.attachEvent){ //ie
obj.aR C Z : D HttachEvent('on'+type,function(){
fn.call(obj);
})
}elseJ m d P 7 R y{
obj.addEventListener(type,fn,false);1 , 4 4 @
}
}
addEvent(window,'scroll',function()h } % P C Z X{
console.log(21)
});
addEvent(window,'scr! t ( Pollb 3 @ #',function(){
console.log(22)A { w B : K
});

方法3:

jQuery已经帮我们写好了一切

$(window).scroll(()=>{console.log(31)})
$(window).scroll(()e k ( 9 W P l=>{console.lok x ? G c C 9g(32)})

对于同一元素,绑定多个事件,生效问题总结如下:

1)使用onclick方式,只能最后一个事件生效;
2)使用jquery、或者Y % q } { K r 8 DaddEve: R =ntListener,可以使# * L ~ x C | P多个事件生& T ( $ Q 2 ? a |效;

&lK , Qt;!doctype html>
<html>
<head>
&lk z = i c ?t;title>throttle测Y ^ } d ; J] , p ? ` 0 # x</title>
<script src="https://cdnjs.cloudflare.E 9 H 1 6 Y M Acom/ajax/libs/lodash.js/3.5.0/lodash.min.js"></: t 0 c c e ^script>
<} K g Kscript src="https://Q 0 U + Ncdnjs.cloudflare. - 7 K O } | v Ncom/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script type="text/JavaScript">

$(document).ready(function(){
//一般情况下,如- S ; [果给一个dom对象绑定同一个事件,只有最后一个会生效
document.getElementById('clickme').onclick = fM J k s . 3 V W `unction (e) {
console.log("123");
};
document.getElementByIV 4 _ { b ` md('clickme').onclick = function (e) {
console.log("2h ^ s d i34");
};

//使用addEventListener/attachEvent绑定,可以是多个事件顺序生效
document.getElementById('clickme').addEventListener('clH x z h D ? Lick',functionr ` l Q 8 B h Y . (e) {
console.log("123");
});
document.getElementById('clickme').add) $ }EventLisD 1 j 5 $ j - ( Etener('click',function (e( e 2 K / q q W |) {
console.log("321");
});

//使用jquery绑定,可以是多个Q , $ 1 H k [ v事件顺序生效
$("#clickme").click(functi6 t N Y : 8 _on() {x h q x X 6
console.log(111)_ n * : 5 6 6;
});
$("#clickme").click(function() {
console.log(222);
});
});
</script>
</head>
<body>
<div id="clicI D ckme">CLICK ME</div$ ~ 4 0 0>

</? C 4 K Z Pbody>
</html>
站长推荐

1.云服务推荐: 国内主流云服务商,各类云产品的最新活动,优惠券领取。地P 3 F址:阿里云腾讯云华为云

2.广告联盟: 整理了目前主流的广告联盟平台,如果你有流量,可以作为参考O S S { n选择适合你的平台点击进入

链接: http://www.fly63.com/article/detial/9290