亚洲中字慕日产2020,大陆极品少妇内射AAAAAA,无码av大香线蕉伊人久久,久久精品国产亚洲av麻豆网站

資訊專欄INFORMATION COLUMN

JavaScript系列之鼠標滾輪事件

vspiders / 2424人閱讀

摘要：鼠標滾輪事件當在被綁定的對象上如某個或者發(fā)生鼠標滾輪滾動時觸發(fā)。

鼠標滾輪事件 
當在被綁定的對象上(如：某個div或者doucument)發(fā)生鼠標滾輪滾動時觸發(fā)。

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

一、ie/chrome下的事件 :　onmousewheel

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

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

     向上滾動up：120 
     向下滾動down: -120

二、firefox 下的事件: DOMMouseScroll

事件綁定方式：addEventListener

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

     向上滾動up: -3
     向下滾動down: 3

/*
    封裝一個函數(shù)：
    obj  需要加鼠標滾輪事件的對象
    upFn  當滾輪向上滾動時執(zhí)行的函數(shù)
    downFn  當滾輪向下滾動時執(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);

    }
}



都存在的問題



當頁面本身就存在滾動條時就會出現(xiàn)異常，解決辦法：阻止瀏覽器的默認行為




ie：returnValue = false
DOM：preventDefault()




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

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

}

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

           
               
                                           
                       
                 
            
                     
             
               

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

                 
                   
轉載請注明本文地址：http://www.ezyhdfw.cn/yun/87549.html

               

                      
               
              
              

                
相關文章

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

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

UI事件
焦點事件
鼠標與滾輪...
    
                                                   
                          
    
                                
    
                                    chanthuang
                                    
                                    評論0 
                                    收藏0 
                                
    
                          
    
                      
    
                    
    •  
                                                                                       
  • 
                                                
    
                          
    JavaScript 筆記 —— 鼠標事件的瀏覽器差異
    
                                                     
    摘要：本文總結一下，鼠標事件在不同瀏覽器實現(xiàn)的差異。和相關元素差異和是級事件當中的其中兩個事件。標準事件對象使用屬性來識別鼠標按鍵。該事件當中的值與事件對象當中的作用相同。

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

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

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

blur：元素失去焦點，不會冒泡；
DOMFocusIn：同HTML事件focus，于DOM3遭廢棄，選用focusin；
DOMFocusOut：同...
    
                                                   
                          
    
                                
    
                                    clasnake
                                    
                                    評論0 
                                    收藏0 
                                
    
                          
    
                      
    
                    
    •  
                                                                           
                

              

              
               

                  
                  
發(fā)表評論

                   
               

              

                

                  
0條評論
   
                
 
                      

              

           
           

              
 
                

                   
              
  

                  
最新活動
 
           
                             
              





                                
              

           

        
       
    
    
     

      
    

    
    

    
       
       

         
閱讀需要支付1元查看
  
         
     
       

      
  
    
    








        

            

              
              
            

             
        

    








<