Javascript拖拽&拖放系列文章3之細(xì)說事件對象第1/4頁
好了,讓我們開始進(jìn)入正題。
模型相同的屬性/方法
1 Button屬性
Integer類型,可讀可寫。對于特定的鼠標(biāo)事件,表示按下的鼠標(biāo)按鈕,它可以在拖拽的時(shí)候,判斷是否是鼠標(biāo)左鍵引發(fā)mousedown事件。它的所有取值及其意義(參考自《Javascript高級程序設(shè)計(jì)》)好了,讓我們開始進(jìn)入正題。
3.1 e/window.Event對象的屬性/方法
3.1.1 IE事件模型和DOM事件如下:
0-未按下按鈕
1-按下左鍵
2-按下右鍵
3-同時(shí)按下左右按鈕
4-按下中鍵
5-按下左鍵和中鍵
6-按下右鍵和中鍵
7同時(shí)按下左中右鍵
mouseup的button屬性返回的數(shù)值和mousedown事件中的完全一樣。
注:在兼容DOM事件模型的所有瀏覽器中,0表示按下左鍵,數(shù)值1并不存在,2表示按下右鍵,對于非鼠標(biāo)事件,返回“undefined”。
2 clientX、clientY屬性
這兩個(gè)屬性的類型都是Integer,單位是像素,可讀可寫。分別表示相關(guān)事件發(fā)生時(shí),鼠標(biāo)在瀏覽器的客戶端區(qū)域(不包括工具欄、滾動條等)的x坐標(biāo)和y坐標(biāo)。用一張圖片來解釋就再好不過了,請看:

圖3.1:clientX和clientY屬性
以下代碼是一個(gè)非常簡單的示例,它可以隨時(shí)定位鼠標(biāo)的坐標(biāo),并將結(jié)果顯示在兩個(gè)文本框中,如果愿意的話,你可以嘗試運(yùn)行它,兼容目前所有的現(xiàn)代瀏覽器。
示例代碼1:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Untitled Document</title>
<style type="text/css">
body{
border:1px solid black;
margin:0px;
}
</style>
<script type="text/javascript" language="JavaScript">
document.onmousemove=move;
function move(e){
if(!e)
{
e=window.event;
}
var xElement=document.getElementById("x");
var yElement=document.getElementById("y");
xElement.value=e.clientX;
yElement.value=e.clientY;
}
</script>
</head>
<body>
<input type="text" id="x" value="" />
<input type="text" id="y" value="" />
</body>
</html>
3 type屬性
您可能感興趣的文章:
- JavaScript實(shí)現(xiàn)網(wǎng)頁對象拖放功能的方法
- Java實(shí)現(xiàn)鼠標(biāo)拖放功能的方法
- Vue.js實(shí)現(xiàn)拖放效果的實(shí)例
- javascript 拖放效果實(shí)現(xiàn)代碼
- JavaScript 拖放效果代碼
- JavaScript 圖片放大鏡(可拖放、縮放效果)
- 基于jQuery實(shí)現(xiàn)的百度導(dǎo)航li拖放排列效果,即時(shí)更新數(shù)據(jù)庫
- 廣泛收集的jQuery拖放插件集合
- asp.net+jquery Gridview的多行拖放, 以及跨控件拖放
- 腳本div實(shí)現(xiàn)拖放功能(兩種)
相關(guān)文章
JS將json字符串轉(zhuǎn)換為JsonObject的多種實(shí)現(xiàn)方法
在Web前端開發(fā)中,JSON(JavaScript Object Notation)作為數(shù)據(jù)交換格式被廣泛使用,它輕量級且易于人類閱讀和編寫,同時(shí)也易于機(jī)器解析和生成,當(dāng)從服務(wù)器接收數(shù)據(jù)時(shí),我們需要將其轉(zhuǎn)換為JSON對象以便于操作,本文將深入探討如何利用JavaScript實(shí)現(xiàn)這一轉(zhuǎn)換過程2025-02-02
JavaScript中運(yùn)算符與數(shù)組擴(kuò)展詳細(xì)講解
這篇文章主要介紹了JavaScript中運(yùn)算符與數(shù)組擴(kuò)展方法,文中通過示例代碼介紹的非常詳細(xì),對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來一起學(xué)習(xí)吧2022-11-11
如何在微信小程序中實(shí)現(xiàn)Mixins方案
這篇文章主要給大家介紹了關(guān)于如何在微信小程序中實(shí)現(xiàn)Mixins方案的相關(guān)資料,文中通過示例代碼介紹的非常詳細(xì),對大家學(xué)習(xí)或者使用微信小程序具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面來一起學(xué)習(xí)學(xué)習(xí)吧2019-06-06
JavaScript實(shí)現(xiàn)Flash炫光波動特效
JavaScript寫的炫光波動效果,看到一些Flash效果不錯(cuò),用JS也模擬一下,還有很多不完善的地方,給各位參考參考。2015-05-05
每天一篇javascript學(xué)習(xí)小結(jié)(屬性定義方法)
這篇文章主要介紹了javascript中的屬性定義方法知識點(diǎn),對屬性定義方法的基本使用方法,以及各種方法進(jìn)行整理,感興趣的小伙伴們可以參考一下2015-11-11
vue-router路由懶加載的實(shí)現(xiàn)(解決vue項(xiàng)目首次加載慢)
這篇文章主要介紹了vue-router路由懶加載的實(shí)現(xiàn)(解決vue項(xiàng)目首次加載慢),小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過來看看吧2018-08-08
JS獲取本地文件并進(jìn)行網(wǎng)絡(luò)傳輸?shù)拇a詳解
在web中如想要獲取用戶計(jì)算機(jī)上的文件我們通常會用到的方法是通過一個(gè)表單元素<input type="file">操作用戶選擇的文件,本文小編給大家介紹了JS獲取本地文件并進(jìn)行網(wǎng)絡(luò)傳輸?shù)姆椒?需要的朋友可以參考下2024-08-08
JS+CSS實(shí)現(xiàn)大氣清新的滑動菜單效果代碼
這篇文章主要介紹了JS+CSS實(shí)現(xiàn)大氣清新的滑動菜單效果代碼,通過鼠標(biāo)事件結(jié)合定時(shí)函數(shù)實(shí)現(xiàn)頁面元素動態(tài)變換的效果,具有一定參考借鑒價(jià)值,需要的朋友可以參考下2015-10-10

