caoporm97国产在线视频|欧美性XXXXX精品|一本一道久久a久久精品综合开|精品久久久久久久久久久AⅤ|

十年專注于品牌網(wǎng)站建設 十余年專注于網(wǎng)站建設_小程序開發(fā)_APP開發(fā),低調(diào)、敢創(chuàng)新、有情懷!
南昌百恒網(wǎng)絡微信公眾號 掃一掃關注
小程序
tel-icon全國服務熱線:400-680-9298,0791-88117053
掃一掃關注百恒網(wǎng)絡微信公眾號
掃一掃打開百恒網(wǎng)絡微信小程序

百恒網(wǎng)絡

南昌百恒網(wǎng)絡

javascript中鼠標滾輪事件判斷方法及應用實例

百恒網(wǎng)絡 2016-12-23 4863

前面介紹了鼠標的點擊事件,點擊次數(shù)不同所對的值不同,具體判斷方法,如何獲取相關的值,若大家還有什么不清楚的可以點擊《javascript中鼠標按鈕事件判斷方法》再次瀏覽,鼠標滾輪也是常見事件之一,由南昌網(wǎng)站制作公司百恒網(wǎng)絡前端開發(fā)工程師結合實全接著介紹其判斷方法及應用。
? ? ? ?IE 6.0首先實現(xiàn)了 mousewheel 事件。此后,Opera、Chrome和 Safari也都實現(xiàn)了這個事件。當用 戶通過鼠標滾輪與頁面交互、在垂直方向上滾動頁面時(無論向上還是向下),就會觸發(fā) mousewheel 事件。這個事件可以在任何元素上面觸發(fā),終會冒泡到 document(IE8)或 window(IE9、Opera、 Chrome及 Safari)對象。與 mousewheel 事件對應的 event 對象除包含鼠標事件的所有標準信息外, 還包含一個特殊的 wheelDelta 屬性。當用戶向前滾動鼠標滾輪時,wheelDelta 是 120的倍數(shù);當用 戶向后滾動鼠標滾輪時,wheelDelta 是120的倍數(shù)。如圖展示了這個屬性。?

當用戶向前滾動鼠標滾輪時,wheelDelta是120的倍數(shù)
? ? ? ?將 mousewheel 事件處理程序指定給頁面中的任何元素或 document 對象,即可處理鼠標滾輪的 交互操作。來看下面的例子。?

EventUtil.addHandler(document, "mousewheel", function(event){?
? ? ? ?event = EventUtil.getEvent(event);
? ? ? ? alert(event.wheelDelta);?
? ? ? ?});?
? ? ? ?這個例子會在發(fā)生 mousewheel 事件時顯示 wheelDelta 的值。多數(shù)情況下,只要知道鼠標滾輪 滾動的方向就夠了,而這通過檢測 wheelDelta 的正負號就可以確定。 有一點要注意:在 Opera 9.5之前的版本中,wheelDelta 值的正負號是顛倒的。如果你打算支持 早期的 Opera版本,就需要使用瀏覽器檢測技術來確定實際的值,如下面的例子所示。?
EventUtil.addHandler(document, "mousewheel", function(event){
? ? ? ? event = EventUtil.getEvent(event);
? ? ? ? var delta = (client.engine.opera && client.engine.opera < 9.5 ? -event.wheelDelta : event.wheelDelta);
? ? ? ? alert(delta);
? ? ? ? });?
完整代碼如下,其中涉及到的client.js和EventUtil.js見頁面下載地址:




? ? ? ?MouseWheel Event Example
? ? ? ?
? ? ? ?


? ? ? ?
Try scrolling your mouse wheel (IE, Safari, and Opera).

? ? ? ?





以上代碼使用前面創(chuàng)建的 client 對象檢測了瀏覽器是不是早期版本的 Opera。?
由于 mousewheel 事件非常流行,而且所有瀏覽器都支持它,所以 HTML 5也加 入了該事件。
? ? ? ?Firefox支持一個名為 DOMMouseScroll 的類似事件,也是在鼠標滾輪滾動時觸發(fā)。與 mousewheel 事件一樣,DOMMouseScroll 也被視為鼠標事件,因而包含與鼠標事件有關的所有屬性。而有關鼠標滾 輪的信息則保存在 detail 屬性中,當向前滾動鼠標滾輪時,這個屬性的值是-3 的倍數(shù),當向后滾動 鼠標滾輪時,這個屬性的值是 3 的倍數(shù)。如圖展示了這個屬性。
當向前滾動鼠標滾輪時,這個屬性的值是-3的倍數(shù),當向后滾動鼠標滾輪時,這個屬性的值是3的倍數(shù)
? ? ? ?可以將 DOMMouseScroll 事件添加到頁面中的任何元素,而且該事件會冒泡到 window 對象。因此,可以像下面這樣針對這個事件來添加事件處理程序。 ? ? ? ?
EventUtil.addHandler(window, "DOMMouseScroll", function(event){
? ? ? ? event = EventUtil.getEvent(event);
? ? ? ? alert(event.detail);
});
? ? ? ?這個簡單的事件處理程序會在鼠標滾輪滾動時顯示 detail 屬性的值。 若要給出跨瀏覽器環(huán)境下的解決方案,第一步就是創(chuàng)建一個能夠取得鼠標滾輪增量值(delta)的方 法。下面是我們添加到 EventUtil 對象中的這個方法。?

var EventUtil = {
? ? ? ? //省略了其他代碼?
getWheelDelta: function(event){
if (event.wheelDelta){
return (client.engine.opera && client.engine.opera < 9.5 ? -event.wheelDelta : event.wheelDelta);
} else {
return -event.detail * 40;
}
},

//省略了其他代碼 };?

EventUtil.js 點擊下載
或復制地址:http://m.gimmickmag.com/uploads/images/20161221/EventUtil.js
client.js 點擊下載
或復制地址:http://m.gimmickmag.com/uploads/images/20161221/client.js

? ? ? ?這里,getWheelDelta()方法首先檢測了事件對象是否包含 wheelDelta 屬性,如果是則通過瀏 覽器檢測代碼確定正確的值。如果 wheelDelta 不存在,則假設相應的值保存在 detail 屬性中。由于 Firefox 的值有所不同,因此首先要將這個值的符號反向,然后再乘以 40,就可以保證與其他瀏覽器的 值相同了。有了這個方法之后,就可以將相同的事件處理程序指定給 mousewheel 和 DOMMouse- Scroll 事件了,例如:
? ? ? ? (function(){

function handleMouseWheel(event){
event = EventUtil.getEvent(event);
var delta = EventUtil.getWheelDelta(event);
alert(delta);
}

EventUtil.addHandler(document, "mousewheel", handleMouseWheel);
EventUtil.addHandler(document, "DOMMouseScroll", handleMouseWheel);
? ? ? ? })();

? ? ? ?我們將相關代碼放在了一個私有作用域中,從而不會讓新定義的函數(shù)干擾全局作用域。這里定義的 handleMouseWheel()函數(shù)可以用作兩個事件的處理程序(如果指定的事件不存在,則為該事件指定處 理程序的代碼就會靜默地失?。?。由于使用了 EventUtil.getWheelDelta()方法,我們定義的這個事 件處理程序函數(shù)可以適用于任何一種情況。
? 本文僅限內(nèi)部技術人員學習交流,不得作于其他商業(yè)用途.希望此文對廣大技人員有所幫助。原創(chuàng)文章出自:南昌網(wǎng)站建設公司-百恒網(wǎng)絡http://m.gimmickmag.com/如轉(zhuǎn)載請注明出處!


400-680-9298,0791-88117053
掃一掃關注百恒網(wǎng)絡微信公眾號
掃一掃打開百恒網(wǎng)絡小程序

歡迎您的光顧,我們將竭誠為您服務×

售前咨詢 售前咨詢
 
售前咨詢 售前咨詢
 
售前咨詢 售前咨詢
 
售前咨詢 售前咨詢
 
售前咨詢 售前咨詢
 
售后服務 售后服務
 
售后服務 售后服務
 
備案專線 備案專線
 
×