iScroll4 禁止select等页面元素默认事件的解决方法

最新推荐文章于 2020-04-20 09:18:53 发布
转载 最新推荐文章于 2020-04-20 09:18:53 发布 · 830 阅读 · 0

本文介绍了解决iScroll4中select等元素无法正常交互的问题。通过修改iScroll4的onBeforeScrollStart方法，增加了对select、option、textarea等元素的判断，从而允许这些元素的默认行为。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

iScroll4 禁止select等页面元素默认事件的解决方法

起因在于

 
  
这一行，iSroll禁止了事件的默认行为，导致select，option，textarea等元素无法点击。
 <pre prettyprint"="" style="margin-top: 0px; margin-bottom: 0px; margin-left: 22px; white-space: pre-wrap; word-wrap: break-word; font-size: 1em; padding: 0px;">
  解决方法也很简单，只需做一下判断，如下： 
  
 
   

    复制代码
   
 
   
onBeforeScrollStart : function(e){
 
   
　　var nodeType = e.explicitOriginalTarget ? e.explicitOriginalTarget.nodeName.toLowerCase() : (e.target ? e.target.nodeName.toLowerCase() : '');
 
   
　　if(nodeType != 'select' && nodeType != 'option' && nodeType != 'input' && nodeType != 'textarea'){
 
   
　　 　　e.preventDefault();
 
   
　　}
 
   
},
 
  
 
 
 


                

        

    

    
  



    

      

        

            

              
                
                  gmgd
                
              
            

            

                关注
              
            

        

        

          
      

      










                



	

		

			

				
					
阻止事件冒泡，阻止默认事件，event.stopPropagation()和event.preventDefault()，return fal的区别...

				
			

			

				

					weixin_33774615的博客
				

				

					11-11
					
					1951
					
				

			

		

		

			
				
今天来看看前端的冒泡和事件默认事件如何处理
1.event.stopPropagation()方法
这是阻止事件的冒泡方法，不让事件向documen上蔓延，但是默认事件任然会执行，当你掉用这个方法的时候，如果点击一个连接，这个连接仍然会被打开，
2.event.preventDefault()方法
这是阻止默认事件的方法，调用此方法是，连接不会被打开，...

			
		

	



                

            
              



	

		

			

				
					
css阻止input select默认事件

				
			

			

				

					weixin_30483697的博客
				

				

					03-26
					
					570
					
				

			

		

		

			
				
css样式中设置
pointer-events：none;
所有的事件都不会触发包括触发焦点等。
转载于:https://www.cnblogs.com/vbluebirdv/archive/2013/03/26/2982556.html

			
		

	



              


  
              

                


	

		

			

				
					
HTML 禁用Select下拉框的上下左右键盘按键默认事件

				
			

			

				

					NuoYan3327的博客
				

				

					09-20
					
					2327
					
				

			

		

		

			
				
这几天一直在处理input和select等其他一些表单元素的控件，在使用select下拉框时由于需要键盘的上下左右做一些其他的额外任务就尝试直接给select的onkeyup事件绑定自己的方法，这时却发现select下拉框默认已经绑定了键盘的上下左右触发事件，默认的上下左右会自动切换已有的option值，如果使用onkeyup绑定自己的方法会和系统默认的方法相冲突，作为一个萌新也是各种百度查文档，...

			
		

	





	

		

			

				
					
iscroll中使用input框的话是导致无法选中input框

				
			

			

				

					weixin_30649641的博客
				

				

					08-28
					
					194
					
				

			

		

		

			
				
在使用iscroll的移动端的时候如果在iscroll中使用input框的话是导致无法选中input框

原因：iscroll需要一直监听用户的touch操作，以便灵敏的做出对应效果，所以它把其余的默认事件屏蔽了。
iscroll.js源码:
onBeforeScrollStart: function (e) { e.preventDefault(); },
更改：

o...

			
		

	



		

			
		



	

		

			

				
					
JS如何阻止事件冒泡和如何阻止默认行为

				
			

			

				

					A-Select  °
				

				

					04-20
					
					331
					
				

			

		

		

			
				
阻止冒泡但不阻止默认行为
e.cancelBubble = true; 

e.stopPropagation()；

阻止默认行为但没阻止冒泡
e.preventDefault()；

return false;

<!DOCTYPE html>
<html lang="en">
 
<head>
  <meta charset="UTF-8">
...

			
		

	





	

		

			

				
					
iscroll碰到Select无法选择下拉刷新的解决办法

				
			

			

				

					11-24
				

			

		

		

			
				
这里的`preventDefault()`方法阻止了默认的触摸事件行为，防止IScroll在非`<select>`元素上启动滚动。`stopPropagation()`方法则阻止了事件的进一步传播，确保只有被选中的`<select>`元素能够响应用户的触摸操作。  ...

			
		

	





	

		

			

				
					
iScroll中事件点击触发两次解决方案

				
			

			

				

					11-26
				

			

		

		

			
				
其实解决这个方法很简单。iScroll呢其实是截获了点击浏览器时的touchstart和touchend事件。在touchend的时候使用js去触发元素的onclick事件(_end这个函数)。而在实际操作中，先执行了touchend，然后再执行了一次...

			
		

	





	

		

			

				
					
iscroll4.js

				
			

			

				

					01-07
				

			

		

		

			
				
特别是在内容动态加载的场景下，iscroll4.js能够有效地管理页面元素，使得用户在滚动到页面底部时自动加载更多内容，或者在顶部时触发刷新操作。  上拉加载更多功能（ Infinite Scroll）是iscroll4.js的一个亮点。在...

			
		

	





	

		

			

				
					
iscroll.js的上拉下拉刷新时无法回弹的解决方法

				
			

			

				

					11-24
				

			

		

		

			
				
iscroll.js是一款轻量级的JavaScript滚动插件，它提供了平滑滚动、滚动监听和触摸事件处理等功能，特别适合用于移动设备上的Web应用。在上拉下拉刷新功能中，iscroll.js会监听用户的触摸事件，并通过调整元素的位置...

			
		

	





	

		

			

				
					
iscroll4 input textarea不能获得焦点问题

				
			

			

				

					weixin_30603633的博客
				

				

					05-25
					
					144
					
				

			

		

		

			
				
最近在做移动端项目的时候，使用iscroll4实现页面滚动效果，之后发现页面中的input，textarea等不能得到焦点，输入内容。
 问题原因是： 使用iscroll之后，输入框无法聚焦，页面文字等无法复制， iscroll主要一直监听用户的touch操作和鼠标事件，所以把其余事件都屏蔽了，禁止了浏览器的默认行为。
 解决办法：把源代码中的onBeforeScrollStart 函...

			
		

	





	

		

			

				
					
iscroll分页滚动（加回到顶部）

				
			

			

				

					10-25
				

			

		

		

			
				
iscroll.js下拉滚动刷新demo
新增
1：回到顶部效果；
2：底部悬浮显示当前页数与总页(例1/5)；

			
		

	





	

		

			

				
					
如何在某些情况下禁止提交Select下拉框中的默认值或者第一个值(默认选中的就是第一个值啦……)...

				
			

			

				

					weixin_30508241的博客
				

				

					05-10
					
					1102
					
				

			

		

		

			
				
群里有个帅哥问了这么个问题，他的下拉框刚进页面时是隐藏起来的，但是是有值的，为啥呢？因为下拉框默认选中了第一个值呗，，，
所以提交数据的时候就尴尬啦，明明没有选，但是还是有值滴。怎么办呢？
一开始看到的时候不是很理解他的意思，提交的时候判断一下把获取选中的值赋值为空不就好啦。难道还有什么深意？
不过这样是不是有点麻烦或者有点太low啊，想着的时候，群里的大神来了一句设置属性disabled=...

			
		

	





	

		

			

				
					
better-scroll插件阻止长按选中文本？使用preventDefault参数配置

				
			

			

				

					a592522245的博客
				

				

					08-15
					
					1855
					
				

			

		

		

			
				
最近有个web移动端项目用到better-scroll插件，发现在手机上长按文字不能选中。一开始通过设置user-select: text，但没有效果，于是看了下文档。



原来是插件阻止了浏览器默认行为，将preventDefault设置为false，并设置css的user-select属性：




{  -webkit-user-select:text;  -moz-user-selec...

			
		

	





	

		

			

				
					
移动端开发touchmove事件preventDefault引发页面不能滚动问题

					
热门推荐

				
			

			

				

					AlexS Blog
				

				

					03-07
					
					1万+
					
				

			

		

		

			
				
项目中，用到了一个可在页面中的拖拽小图标，由于拖动过程中不能引发页面的拖动@touchmove事件对应函数中加入：
  document.addEventListener("touchmove",this.preventDefault,false);
  
  preventDefault(e) {
     e.preventDefault(); 
}

但实际拖动之后，发现长页面上下也无法拖动...

			
		

	





	

		

			

				
					
1.基础巩固--禁用默认事件

				
			

			

				

					看开了
				

				

					11-03
					
					405
					
				

			

		

		

			
				
禁用默认事件的方法
1.event.preventDefault()
2.return false
区分
先从最常见的label开始,
1.label可以帮助我触发input类的元素的,常用来作为单选,多选的样式重做
2.label是个行内块
3.行内块具有块的性质,但是可以在同行排布
4.块的性质:
    1.独占一行
  &nbsp...

			
		

	





	

		

			

				
					
iScroll4 禁止select等页面元素默认事件的解决方法 转

				
			

			

				

					weixin_30383279的博客
				

				

					06-19
					
					91
					
				

			

		

		

			
				
iScroll4 禁止select等页面元素默认事件的解决方法起因在于onBeforeScrollStart : function(e){ e.preventDefault(); },这一行，iSroll禁止了事件的默认行为，导致select，option，textarea等元素无法点击。解决方法也很简单，只需做一下判断，如下：onBeforeScrollStart : function(e){　...

			
		

	





	

		

			

				
					
实现HTML5页面动态数据加载的iscroll4.js技术

				
			

			

				

					
				

			

		

		

			
				
2. **iscroll4.js的基本使用方法**  要在项目中使用iscroll4.js，首先要确保从源码或包管理器中获取该JavaScript文件，并在HTML文件中引用它。然后选择一个HTML元素作为iscroll的容器，并在该元素上应用滚动效果。...

			
		

	



              




          




        



    





    



      

      

        
      

      





	

		评论	
	

  
	




  

    

      添加红包
      
    

    

      

        
        

          
          
        

        
请填写红包祝福语或标题

      

      

        
        

          
          个
        

        
红包个数最小为10个

      

      

        
        

          
          元
        

        
红包金额最低5元

      

      

        
        

          当前余额3.43元
          前往充值 >
        

      

      

        

          需支付：10.00元
        

        
        
      

    

  





  

    
    
  

  

    
    
  








  

    

      

        

          

            
            
成就一亿技术人!

          

          

        

        

          

          

            领取后你会自动成为博主和红包主的粉丝
            规则
          

        

      

      

        

          

            
              
            
            

              
hope_wisdom
 发出的红包
            

          

        

        

          

          

          

        

      

    

    

  



      
      

      
实付元

      
使用余额支付

      

        

          

            
            点击重新获取
          

        

        
扫码支付

      

      

        
          
            
          
          
        
      

      

        
        钱包余额
          0
          

            
            

              

                
抵扣说明：

                
 1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
 2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

              

            

          

      

      余额充值