成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

JavaScript系列之鼠標(biāo)滾輪事件

vspiders / 2357人閱讀

摘要：鼠標(biāo)滾輪事件當(dāng)在被綁定的對(duì)象上如某個(gè)或者發(fā)生鼠標(biāo)滾輪滾動(dòng)時(shí)觸發(fā)。

鼠標(biāo)滾輪事件 
當(dāng)在被綁定的對(duì)象上(如：某個(gè)div或者doucument)發(fā)生鼠標(biāo)滾輪滾動(dòng)時(shí)觸發(fā)。

在不同的瀏覽器中有不同的表現(xiàn)形式：

一、ie/chrome下的事件 :　onmousewheel

事件綁定方式：on 或者 addEventListener[attachEvent]

獲取滾輪事件具體信息：event.wheelDelta

     向上滾動(dòng)up：120 
     向下滾動(dòng)down: -120

二、firefox 下的事件: DOMMouseScroll

事件綁定方式：addEventListener

獲取滾輪事件具體信息：event.detail

     向上滾動(dòng)up: -3
     向下滾動(dòng)down: 3

/*
    封裝一個(gè)函數(shù)：
    obj  需要加鼠標(biāo)滾輪事件的對(duì)象
    upFn  當(dāng)滾輪向上滾動(dòng)時(shí)執(zhí)行的函數(shù)
    downFn  當(dāng)滾輪向下滾動(dòng)時(shí)執(zhí)行的函數(shù)

*/

function wheel(obj,upFn,downFn) {

    if(arguments.length < 3){
        alert("Sorry,你輸入的參數(shù)不夠");
    }

    obj.onmousewheel = fn;  

    obj.addEventListener && obj.addEventListener("DOMMouseScroll",fn,false);

    function fn(ev){

        var ev = ev || window.event;

        var bool = true;

        if(ev.wheelDelta){
            bool = ev.wheelDelta > 0 ? true : false;
        }else if(ev.detail){
            bool = ev.detail < 0 ? true : false;
        }

        bool && upFn();
        (!bool) && downFn();

        //prevent(ev);

    }
}



都存在的問題



當(dāng)頁面本身就存在滾動(dòng)條時(shí)就會(huì)出現(xiàn)異常，解決辦法：阻止瀏覽器的默認(rèn)行為




ie：returnValue = false
DOM：preventDefault()




/*
    阻止默認(rèn)行為函數(shù)
*/
function prevent(evt){

    if(evt.preventDefault){
        evt.preventDefault();
    }else{
        evt.returnValue = false;
    }

}

//將wheel函數(shù)中的prevent(ev)前注釋去掉即可

           
               
                                           
                       
                 
            
                     
             
               

                   
 文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

                 
                   
轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/87549.html

               

                      
               
              
              

                
相關(guān)文章

                
    
                             
                                                                                                    
  • 
                                                
    
                          
    JavaScript系列之事件類型
    
                                                     
    摘要：有兩種事件處理程序的方式。第一種第二種事件當(dāng)調(diào)整瀏覽器的窗口到一個(gè)新的寬度或高度時(shí)，就會(huì)觸發(fā)事件。事件在元素獲得焦點(diǎn)時(shí)觸發(fā)。這個(gè)事件冒泡某些瀏覽器不支持。事件在鼠標(biāo)光標(biāo)從元素外部首次移動(dòng)到元素范圍內(nèi)時(shí)觸發(fā)。事件這個(gè)事件跟蹤鼠標(biāo)滾輪。

JavaScript簡(jiǎn)單入門可以看看我丑丑的Github博客JavaScript簡(jiǎn)單入門
本文主要簡(jiǎn)單介紹以下幾類事件：

UI事件
焦點(diǎn)事件
鼠標(biāo)與滾輪...
    
                                                   
                          
    
                                
    
                                    chanthuang
                                    
                                    評(píng)論0 
                                    收藏0 
                                
    
                          
    
                      
    
                    
    •  
                                                                                       
  • 
                                                
    
                          
    JavaScript 筆記 —— 鼠標(biāo)事件的瀏覽器差異
    
                                                     
    摘要：本文總結(jié)一下，鼠標(biāo)事件在不同瀏覽器實(shí)現(xiàn)的差異。和相關(guān)元素差異和是級(jí)事件當(dāng)中的其中兩個(gè)事件。標(biāo)準(zhǔn)事件對(duì)象使用屬性來識(shí)別鼠標(biāo)按鍵。該事件當(dāng)中的值與事件對(duì)象當(dāng)中的作用相同。

鼠標(biāo)是我們?cè)?PC 端瀏覽網(wǎng)頁時(shí)候最重要的交互工具，因此鼠標(biāo)事件也是 Web 開發(fā)當(dāng)中最常用的一類事件。然而，由于各種原因，不同廠商或者不同版本的瀏覽器之間對(duì)于鼠標(biāo)事件的實(shí)現(xiàn)也有所不同。本文總結(jié)一下，鼠標(biāo)事件在不同瀏覽器...
    
                                                   
                          
    
                                
    
                                    haoguo
                                    
                                    評(píng)論0 
                                    收藏0 
                                
    
                          
    
                      
    
                    
    •  
                                                                                       
  • 
                                                
    
                          
    一文讀懂鼠標(biāo)滾輪事件（wheelEvent）
    
                                                     
    摘要：下面正式推薦大神的博文前段時(shí)間使用做滾動(dòng)條控件，添加滾輪事件時(shí)，查閱了一些資料，發(fā)現(xiàn)大都是文檔描述或簡(jiǎn)單示例，對(duì)于開發(fā)者還是不夠。一測(cè)試目標(biāo)探索事件中常用屬性的有效性，垂直步進(jìn)算法滑動(dòng)幅度以及與電腦個(gè)性化設(shè)置的關(guān)聯(lián)。

最近在用VUE寫一個(gè)后臺(tái)管理系統(tǒng)，頂部標(biāo)簽頁涉及鼠標(biāo)滾輪事件，由于每個(gè)瀏覽器對(duì)滾輪事件的處理方式不一樣，個(gè)人對(duì)這個(gè)又不懂，折騰了很久，參考了大神的代碼，也把百度翻爛了，找...
    
                                                   
                          
    
                                
    
                                    doodlewind
                                    
                                    評(píng)論0 
                                    收藏0 
                                
    
                          
    
                      
    
                    
    •  
                                                                                       
  • 
                                                
    
                          
    JavaScript 事件——“事件類型”中“焦點(diǎn)、鼠標(biāo)和滾輪事件”的注意要點(diǎn)
    
                                                     
    摘要：焦點(diǎn)事件一般利用這些事件與方法和屬性配合。此外，支持一個(gè)名為的類似事件，也是在鼠標(biāo)滾動(dòng)滾輪時(shí)除法。

焦點(diǎn)事件
一般利用這些事件與document.hasFocus()方法和document.activeElement屬性配合。主要有：

blur：元素失去焦點(diǎn)，不會(huì)冒泡；
DOMFocusIn：同HTML事件focus，于DOM3遭廢棄，選用focusin；
DOMFocusOut：同...
    
                                                   
                          
    
                                
    
                                    clasnake
                                    
                                    評(píng)論0 
                                    收藏0 
                                
    
                          
    
                      
    
                    
    •  
                                                                           
                

              

              
               

                  
                  
發(fā)表評(píng)論

                   
               

              

                

                  
0條評(píng)論
   
                
 
                      

              

           
           

              
 
                

                   
              
  

                  
最新活動(dòng)
 
           
                             
              





                                
              

           

        
       
    
    
     

      
    

    
    

    
       
       

         
閱讀需要支付1元查看
  
         
     
       

      
  
    
    








        

            

              
              
            

             
        

    








<