关于iscroll5 click事件触发两次

简介: 用iscroll做滑动时,里面的元素需要绑定click 事件,但是,明明只是绑定了一次,却触发了两次。

</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);




有需要的交流的可以加个好友


相关文章
|
小程序
小程序中点击子元素事件而不触发父元素的点击事件
小程序中点击子元素事件而不触发父元素的点击事件
179 0
|
8月前
基于Vue2用keydown、setTimeout事件实现连续按键(连击)任意键(或组合键)3秒触发自定义事件(以F1键为例)
基于Vue2用keydown、setTimeout事件实现连续按键(连击)任意键(或组合键)3秒触发自定义事件(以F1键为例)
|
8月前
移动端click事件、touch事件、tap事件的区别
移动端click事件、touch事件、tap事件的区别
243 0
|
4月前
|
存储 JavaScript 前端开发
js事件冒泡和事件委托
事件冒泡是指事件从最内层元素开始逐级向上传播至祖先元素的过程,默认情况下,点击子元素时会先触发自身的事件处理程序,再依次向上触发父元素的处理程序。事件委托则是在父元素上设置事件处理程序,利用事件冒泡机制处理子元素的事件,以此减少内存消耗和提高性能,特别适用于处理大量动态子元素的情况。其区别在于事件冒泡是事件传播机制的一部分,而事件委托是编程技巧,通过在父元素上绑定事件处理程序来简化子元素的事件处理。
34 0
|
6月前
|
JavaScript 前端开发
vue动画——旋转动画(悬浮触发、点击触发)
vue动画——旋转动画(悬浮触发、点击触发)
263 1
|
8月前
失焦事件和点击事件
失焦事件和点击事件
47 1
|
JavaScript 前端开发
JavaScript 点击事件:一个按钮触发另一个按钮
给按钮 2 添加点击事件 click 触发按钮 1 的点击事件,就算给按钮 1 添加样式 display: none; 或 visibility: hidden; 隐藏起来也能触发。
639 0
|
JavaScript 前端开发
简单解析js的事件冒泡及如何取消事件冒泡
简单解析js的事件冒泡 1.什么是事件冒泡? 以click点击事件为例。假如我们有一个多层结构标签。如下图,是4个div嵌套。每个div都有点击的监听事件,分别alert(“box4”),alert(“box3”),alert(“box2”),alert(“box1”)。当我们点击最里面的div时,点击事件开始传递。出现的效果是alert(“box4”)-alert(“box3”)-alert(“box2”)-alert(“box1”)。这就是事件冒泡阶段。效果如下: 在这里插入图片描述 HTML代码: &lt;div class=&quot;box1&quot;&gt; &lt;div clas
|
JavaScript
13、JS事件(事件绑定、事件流、阻止事件冒泡、取消元素默认行为)
13、JS事件(事件绑定、事件流、阻止事件冒泡、取消元素默认行为)
126 0
AI助理

你好,我是AI助理

可以解答问题、推荐解决方案等