js獲取頁面中的滑鼠滾輪事件

阿新 • • 發佈：2019-01-12

附加事件

其中經我測試，IE/Opera屬於同一型別，使用attachEvent即可新增滾輪事件。

/*IE註冊事件*/ if(document.attachEvent){
document.attachEvent('onmousewheel',scrollFunc);
}

Firefox使用addEventListener新增滾輪事件

/*Firefox註冊事件*/
if(document.addEventListener){
document.addEventListener('DOMMouseScroll',scrollFunc,false);
}

Safari與Chrome屬於同一型別，可使用HTML DOM方式新增事件

window.onmousewheel=document.onmousewheel=scrollFunc;//IE/Opera/Chrome

其中除Firefox外其餘均可使用HTML DOM方式新增事件，因此新增事件使用以下方式

/*註冊事件*/
if(document.addEventListener){
document.addEventListener('DOMMouseScroll',scrollFunc,false);
}//W3C
window.onmousewheel=document.onmousewheel=scrollFunc;//IE/Opera/Chrome

detail與wheelDelta

判斷滾輪向上或向下在瀏覽器中也要考慮相容性，現在五大瀏覽器（IE、Opera、Safari、Firefox、Chrome）中Firefox 使用detail，其餘四類使用wheelDelta；兩者只在取值上不一致，代表含義一致，detail與wheelDelta只各取兩個值，detail只取±3，wheelDelta只取±120，其中正數表示為向上，負數表示向下。

在非firefox瀏覽器中，滾輪向上滾動返回的數值是120，向下滾動返回-120
而在firefox瀏覽器中，滾輪向上滾動返回的數值是-3，向下滾動返回3

測試程式碼：

<!DOCTYPE html>
<html>
<head>
    <style type="text/css">
        html, body{
            height: 100%;
            margin: 0;
            padding: 0;
        }
        *{margin:0; padding:0;}
        #map {
            height: 100%;
        }
    </style>
</head>
<body>
<p><label for="wheelDelta"> 瀏覽器型別:</label>(IE/Opera)<input type="text" id="wheelDelta"/></p>
<p><label for="detail"> 滾動值:</label><input type="text" id="detail"/></p>
<script type="text/javascript">
    var scrollFunc = function (e) {
        e = e || window.event;

        var t1 = document.getElementById("wheelDelta");
        var t2 = document.getElementById("detail");
        if (e.wheelDelta) {//IE/Opera/Chrome
            t1.value = "IE、Opera、Safari、Chrome";
            t2.value = e.wheelDelta;
        } else if (e.detail) {//Firefox
            t1.value = "Firefox";
            t2.value = e.detail;
        }
        //ScrollText(direct);
    }
    /*註冊事件*/
    if (document.addEventListener) {
        document.addEventListener('DOMMouseScroll', scrollFunc, false);
    }//W3C
    window.onmousewheel = document.onmousewheel = scrollFunc;//IE/Opera/Chrome/Safari
</script>
</body>
</html>

js獲取頁面中的滑鼠滾輪事件

附加事件其中經我測試，IE/Opera屬於同一型別，使用attachEvent即可新增滾輪事件。 /*IE註冊事件*/ if(document.attachEvent){ document.attachEvent('onmousewheel

JS 獲取DIV中滑鼠相對位置座標

<HEAD> <TITLE> JS獲取DIV相對座標</TITLE> <mce:script type="text/javascript"><!-- function getX(obj){ var parO

js獲取頁面url中的各項值

js一、通過window.location獲取各項參數1、獲取頁面完整的urlurl = window.location.href;2、獲取頁面的域名host = window.location.host;host2=document.domain; 應用場景：頁面跳轉，開發環境和測試環境域名不同，所以需要

js獲取url 中的值，並跳轉相應頁面

實現方法：一：獲取URL帶QUESTRING引數的JAVASCRIPT客戶端解決方案，相當於asp的request.querystring，PHP的$_GET1.函式:<Script language="javascript">function GetRequest() {var url = lo

vue中判斷滑鼠滾輪事件 / 方向 / 向上或向下

html <div id="head"> </div> js中 <script> export default { data(){ return{

JS禁止頁面中的一些操作事件

禁止滑鼠右鍵：oncontextmenu="return false"；禁止選擇：onselectstart="return false"；禁止拖放：ondragstart="return false"；禁止拷貝：oncopy=document.selection.empty() 。禁止複製：onco

JS事件-滑鼠滾輪事件

之前學習了onmouseover，onmousedown等滑鼠事件，今天來看看滑鼠的滾輪事件，瀏覽器相容一直是讓人比較噁心的事情，今天就讓我們將噁心進行到底，看看這個噁心的滑鼠滾輪事件！滑鼠滾輪事

js 滑鼠滾輪事件

總結一下滾動滑鼠滾輪，可以左右切換圖片。在網上找的資料，自己進行修改邏輯，完成。 <script> var scrollFunc = function (e) { var direct = 0; e = e |

C# 中手動新增Mousewheel滑鼠滾輪事件

如果將窗體或容器控制元件(如Panel控制元件)的AutoScroll屬性設定為True時，那麼當窗體或Panel容不下其中的子控制元件時就會出現滾動條，通過移動滾動條可以上下顯示出窗體或Panel中的全部內容。但是預設情況下滾動條的移動只能通過滑鼠直接拖動滾動條來實現

js滑鼠滾輪事件詳解（全相容ie、chrome、firefox）實現圖片縮放

以前看到的都是用IE的zoom，所以非IE就不支援，昨天看到這個js中滑鼠滾輪事件詳解，於是完全相容（IE6-8,FF,Chrome,Opera,Safari）的滑鼠滾軸縮放圖片效果今天就誕生了 ====程式碼如下： var zooming=function(e){ e=window.event

Winform 中panel的mousewheel滑鼠滾輪事件觸發

js獲取頁面的中可用的寬高

網頁可見區域寬：document.body.clientWidth 網頁可見區域高：document.body.clientHeight 網頁可見區域寬：document.body.offsetWidth (包括邊線的寬) 網頁可見區域高：document.body.o

jQuery框架使用，jq選擇器，jq操作頁面內容， jq操作類名，jq操作全局屬性,jq獲取盒子信息,jq獲取位置信息，js/jq頁面加載完畢事件，jq事件

log html 事件對象 remove js事件對象屬性相對 eight prevent jq選擇器 // 獲取所有的頁面元素jq對象 $(‘css3選擇器語法‘); var $box = $(".box:nth-child(1)"); 獲取的是j

在jsp頁面中js獲取java中變數的值

1。通過<%=java變數%>的方式賦值給js變數。 1、定義一個java變數 <% String a = "222";//定義一個string型別的java變數 %> 2、輸出給js var k = <%=a%>;輸出

js獲取頁面元素和滑鼠的點選位置

前端一些頁面效果實現時，往往需要操作大量的DOM物件，即要在某個特定的位置顯示某個元素。如：在滑鼠點選的位置顯示，就要獲取當前滑鼠的位置。 1 獲取滑鼠點選位置 2 獲取頁面元素位置 3 clientHeight、offsetHeight、scro

JS。某滑鼠滾輪事件。

新增和刪除偵聽事件： this.initEvent = function(){ var mousewheelevt=(/Firefox/i.test(navigator.userAgent))? "DOMMouseScroll" : "mousewheel"; //FF

JS的事件(2)--事件函式的取消/事件預設行為/鍵盤事件/滑鼠滾輪事件

這兩天課設，也沒有更博，沒有學習新的知識，沒有複習舊的知識，所以今天晚上有點空就想著把事件的第二部分完成，(其中還應該有滑鼠滾輪事件，但是今天晚上沒有看到那塊，所以就先更這一點，明天補齊)，滑鼠滾輪事件也已經完成 1. 事件函式的取消 //事

js 獲取URL中參數

res 獲取值參數名稱 var blog null match class query function getQueryString() { var result = location.search.match(new RegExp("[\?\&][^

js 獲取url 中的參數；

實例 pos 瀏覽器中 date toc 整數調用方法 cap adding 用JS獲取地址欄參數的方法（超級簡單）方法一：采用正則表達式獲取地址欄參數：（強烈推薦，既實用又方便！） function GetQueryString(name) {

js獲取頁面地址

win 完整 class highlight window true bsp javascrip clas //獲取完整地址 window.location.href // 獲取域名 window.location.host; 　　 js獲取頁面地址

js獲取頁面中的滑鼠滾輪事件

相關推薦