</pre>用iscroll做滑动时,里面的元素需要绑定click 事件,但是,明明只是绑定了一次,却触发了两次。<p></p><p></p><pre name="code" class="html"><div id="wrapper" style="display:none"> <div id="scroller"> <ul> <li>Pretty row 1</li> <li>Pretty row 2</li> <li>Pretty row 3</li> <li>Pretty row 4</li> <li>Pretty row 5</li> <li>Pretty row 6</li> <li>Pretty row 7</li> <li>Pretty row 8</li> <li>Pretty row 9</li> <li>Pretty row 10</li> </ul> <p class="btn"> hide</p> </div> </div> <div id="footer"> show</div> <script type="text/javascript"> var myScroll; $('.btn').on('click',function(){ $('#wrapper').hide(); }); $('#footer').on('click',function(){ myScroll = new IScroll('#wrapper', { mouseWheel: true,click:true }); $('#wrapper').show(); }) $('li').on('click',function(){ console.log(3213); }); </script>
当wrapper显示,初始化iscorll,再点击一次 li元素是console.log只打印一次。但是,但点击btn元素时,wrapper隐藏,在点击footer元素,wrapper显示后,再点击一次li元素时
console.log只打印两次,循环操作时,每循环一次,console.log只打印次数+1。
可以在页面加载完成时,就初始化iscorll ,同时加上destory();
<script type="text/javascript"> var myScroll = new IScroll('#wrapper', {click:true }); $('.btn').on('click',function(){ console.log('sdsadsad'); myScroll.destroy(); $('#wrapper').hide(); }); $('#footer').on('click',function(){ $('#wrapper').show(); }) $('li').on('click',function(){ console.log(3213); }); </script>这样点击li时 console.log只打印了一次,但是点击btn时,第一次点击就打印两遍
隐藏显示,在点击btn时,只打印出一次。第一种写法 是点击一次footer 就在li元素和btn上添加一次事件绑定,所以在每次隐藏时都需要对iscorll销毁。myScroll.destroy();
这样做同样会也有多次触发的结果。
原因便是 在$btn.on('click')下有myScroll.destroy(),影响的同时 浏览器为未设置成手机模式,改为手机模式就没问题。
为了彻底避免这些情况iscorll 有一个tap事件,用tap代替click
var $wrapper = document.getElementById('wrapper'),$btn = $('.btn'),$footer = $('#footer'),$li = $('.lia'); var myScroll = new IScroll($wrapper, { click:true,tap:true}); $btn.on('tap',function(){ myScroll.destroy(); $wrapper.style.display = 'none'; }); $footer.on('click',function(){ $wrapper.style.display = 'block'; myScroll.refresh(); }); $li.on('tap',function(){ console.log(3213); });
foot不在wrapper里 对其绑定tap 无效的。
关于Event 对象
// createEvent(eventType) 该方法将创建一种新的事件类型,该类型由参数 eventType 指定。注意,该参数的值不是要创建的事件接口的名称,而是定义那个接口的 DOM 模块的名称。 var event = document.createEvent('Event'); // event.initEvent(eventType,canBubble,cancelable) //eventType 字符串值。事件的类型。 //canBubble 事件是否起泡。 //cancelable 是否可以用 preventDefault() 方法取消事件。 event.initEvent('build', true, true); // Listen for the event. elem.addEventListener('build', function (e) { // e.target matches elem }, false); // dispatchEvent() 方法给节点分派一个合成事件。 //evt必需传入。要分派的 Event 对象。 elem.dispatchEvent(event);
有需要的交流的可以加个好友