首頁 > web前端 > js教程 > Js操作滑鼠事件的流程

Js操作滑鼠事件的流程

php中世界最好的语言
發布: 2017-11-28 14:48:19
原創
1955 人瀏覽過

在實際專案裡我們常常都需要用javascript操作滑鼠事件是,那麼今天就來給大家詳細的說一下JS操作滑鼠事件的流程,怎麼使用JS操作滑鼠事件。

注意onmouseover、onmouseout是只執行一次的,二onmousemove是執行多次的

Onmousedown也是只執行一次,每次點擊才執行一次,不會持續觸發,與onkeydown、onkeypress不同,這裡是很亂的,滑鼠事件到底有哪些? ? ?

在火狐中顯示是undefined

在ie中顯示是undefined

但是上面的在谷歌中顯示都是正常的,現在需要的做一個兼容,兼容IE與火狐

這裡是有一個疑問的,單獨的console.log(window),在其中看到的event屬性是undefined,但是consoe.log(window.event),時顯示的卻是自己想要的效果,為什麼會有這樣的差別呢?

這是老師糾結的地方,但是我不知道到底是為啥這樣

上面的分析是有錯誤的,在谷歌中,e與window.event都是支持的,火狐只支援e,Google只支援window.event

傳參與動態創建屬性

#由於e.pageX和e.pageY這個屬性在IE低版本不支持,(在IE低版本中顯示是)所以利用視覺區滑鼠位置+滾動條捲曲高度來實現獲取基於內容區的滑鼠位置

Document上面的是window

事件捕獲只是了解內容,在IE中不支援

事件處理函數,注意0級事件後面的事件是會覆寫前面的事件,這是很重要的

Window是可以省略的,上面的程式碼沒什麼意義

冒泡:從具體節點到不具體節點

現在代表的是捕獲,但是沒什麼具體的效果,現在和冒泡是一樣的

捕獲:從不具體節點到具體節點

實作與函數執行上下文一樣的效果,addEventListener()在IE瀏覽器中不支援

上面是卸載DOM 0級事件的方法(卸載事件,若界面再次刷新的話,還是會繼續執行該事件處理函數)

其實和卸載DOM0級事件是一樣的效果

#IE添加DOM2級事件

在IE最新版本IE11已經是不支援attachEvent這個屬性

IE卸載DOM2級事件

下面是封裝函數:

#這種寫法在IE中顯示為空

這種寫法在非IE中是會直接報錯

非IE中顯示是一個函數,IE中顯示是undefined,下面的函數封裝就是根據這樣的原理來進行

由於事件捕獲是很少使用到的,所以第四個值通常都是false,不用單獨的傳參,直接寫死

在卸載時,在事件處理函數中不能使用匿名函數

注意在IE版本中的執行順序

DOMContentLoaded現在是了解內容,注意一個概念:事件處理函數 


相信看了這些案例你已經掌握了方法,更多精彩請關注php中文網其它相關文章!

相關閱讀:

怎麼讓DIV自適應高度

#怎麼用CSS隱藏圖片背景的文字內容

前端專案開始製作前初始化CSS必要性

以上是Js操作滑鼠事件的流程的詳細內容。更多資訊請關注PHP中文網其他相關文章!

相關標籤:
來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板