http://codepen.io/YuanWing/pen/XmaYbr
如果我把1,2,3都点了一下,然后滚动滚动条,内容追加了三次;
我都有removeEventListener
,为什么不是只追加一次呢~
因为有参数传递,所以scrollFn
只能定义到page
里面~
<body>
<p class="wrapper"></p>
<ul class="tab-title" id="tabTitle">
<li>click1</li>
<li>click2</li>
<li>click3</li>
</ul>
<p class="tab-con" id="tabCon"></p>
<script>
var tabTitle = document.getElementById('tabTitle');
var tabCon = document.getElementById('tabCon');
tabTitle.addEventListener('click', fn, false);
function fn(e) {
var _t = e.target;
if(_t.tagName.toLowerCase() === 'li') {
page({page: '__one__'});
}
}
function page(obj){
document.body.removeEventListener('scroll', scrollFn, false);
document.body.addEventListener('scroll', scrollFn, false);
function scrollFn() {
document.body.removeEventListener('scroll', scrollFn, false);
tabCon.innerHTML += obj.page;
}
}
</script>
</body>
每次page执行的时候,
定义的scrollFn都是一个新的内部函数值
那么就导致document.body.removeEventListener('scroll', scrollFn, false);实际上是没有效果的
那么代码可以如下修改