关于dom节点绑定滑动事件导致浏览器上下滑动失效解决方案

1、移动端开发往往需要添加一下自定义的左右滑动事件，但是添加了左右滑动事件之后就要阻止浏览器大默认事件，否则dom节点的滑动事件和浏览器本身的滑动会出现冲突，导致滑动的时候会出现消失瞬间再出现的效果

解决方案：event.preventDefault();//阻止浏览器默认事件即可


2、阻止浏览器默认事件之后发现这添加了滑动事件的dom节点上下滑动也失效，这是一个很坑爹的地方，如果你的活动dom节点占据了整块屏幕，也就是说你的页面上下动不了了；

解决方案：设置两个开关，分别对应左右滑动和上下滑动，即左右滑动的时候才阻止默认事件，上下滑动的时候并没有阻止，代码如下：

				


				
时间： 2024-10-23 00:01:50 

		


		


	

	
	

		


		
关于dom节点绑定滑动事件导致浏览器上下滑动失效解决方案的相关文章


								

		

			

                随笔一个dom节点绑定事件
			

		

		

									

				以下利用jquery说明: js中,给一个dom节点绑定事件再平常不过了.这里说下,如果dom经常发生变化的话,给这个dom绑定事件的情况. 比如代码如下: li的节点,绑定了事件:点击会打出来里头的html内容. button点击事件:会生成一个li节点. 1 <html> 2 <head> 3 <meta charset="UTF-8"> 4 </head> 5 <body> 6 <ul class="ul			

		

	

				

		

			

                动态生成DOM元素绑定click事件无效问题
			

		

		

									

				在页面里,jq动态生成dom节点,该节点的click事件无效. 如,html里动态添加class名为.del的<a>, js文件中: $('.del').bind('click',fuction(){ alert('sda'); }) 不响应, 网上说可以用live代替bind事件,但在jq1.7版本开始,就取消了live事件, 解决方法: on()事件 代码改为: $(document).on('click','.del',fuction(){ alert('sda'); }) 这样就搞定了			

		

	

				

		

			

                通过js添加的DOM节点的click事件绑定不上的解决方案以及IOS下click事件委派失效的解决方案
			

		

		

									

				问题描述: 如以下代码所示,通过js添加的Dom节点,在其上绑定点击事件,有的时候会出现点击事件不响应的情况,按照正常的理解,js代码具有阻塞性,Dom节点添加成功之后,就可以找到该节点并绑定事件,没有道理会出现事件绑定不上的问题,但是这种情况的确是遇到了多次,问题原因有待日后深入理解,下面记载一下问题的解决方案. 解决方案: 方案一:将事件绑定直接写在行内标签上"<thead onclick='myFunction(this)' >",其中,this代表的是当前元素,是一			

		

	

				

		

			

                定位神器：1秒定位DOM元素绑定的事件代码的位置
			

		

		

									

				1 VisualEvent github地址: https://github.com/DataTables... 2 使用教程 打开http://sprymedia.co.uk/Visual...,然后将visual Event连接拖动到浏览器的书签栏上 随便打开一个页面,然后点击VisualEvent书签后,页面就变成这样了.鼠标移动到蓝色或者黄色边框的元素上,相应得逻辑代码就会出现.截图左下角蓝色长条上有一些有用的信息,最左边有个关闭的按钮. 3. 最后 VisualEvent并不是万能的,			

		

	

				

		

			

                多个相同class节点绑定同一事件
			

		

		

									

				案例: <div id="div1">内容</div> <div id="div1">内容</div> <div id="div1">内容</div> <div id="div1">内容</div> <div id="div1">内容</div> <div id="div1			

		

	

				

		

			

                给DOM元素绑定click事件也有学问
			

		

		

									

				最简单的莫过于使用click方法:名仕娱乐城 <input id="btn" type="button" value="BUTTON" onclick="alert(1)"/> <script> var btn = document.getElementById('btn'); btn.click(); </script> 所有浏览器都弹出了1.但是如果把input换成div呢? <d			

		

	

				

		

			

                给echart初始化的dom节点绑定时间获取点击的值渲染省市区
			

		

		

									

				this.drawMap().on('click', function (params) { var province = params.name; that.mapStatus = province; if(province=="北京"||province=="天津"||province=="长春"||province=="长沙"||province=="杭州"||province=="昆明&q			

		

	

				

		

			

                移动端表层div滑动，导致底层body滑动（touchmove的阻止）
			

		

		

									

				body很长,可以滑动,body头部有一个模拟下拉的选择框,下拉选择有滚动轴 我给body一个overflow:hidden和高度是没有用的.手机网站上背景还是可以滑动,然后我给body一个touchmove的preventdefault()阻止事件,body滑动阻止了,PC上面是可以了,但是手机上面滑动div还是会导致底部body的滑动,我给div 一个阻止冒泡的事件stopPropagation(),手机网站上面还是不可以. 解决方案 我经过反复测试,发现滚动轴滚到底部的时候,会触发body			

		

	

				

		

			

                一个DOM元素绑定多个事件时，先执行冒泡还是捕获
			

		

		

									

				绑定在被点击元素的事件是按照代码顺序发生,其他元素通过冒泡或者捕获“感知”的事件,按照W3C的标准,先发生捕获事件,后发生冒泡事件.所有事件的顺序是:其他元素捕获阶段事件 -> 本元素代码顺序事件 -> 其他元素冒泡阶段事件 . 一个DOM元素绑定两个事件,一个冒泡,一个捕获,则事件会执行多少次,执行顺序如何. 首先来了解一下冒泡和捕获是怎么回事: 1.冒泡 冒泡是从下向上,DOM元素绑定的事件被触发时,此时该元素为目标元素,目标元素执行后,它的的祖元素绑定的事件会向上顺序执行.如下代码所示,