整合營(yíng)銷服務(wù)商
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢熱線：
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢熱線：
得收藏的HTML DOM事件和鼠標(biāo)鍵盤(pán)事件
onabort//圖像的加載被中斷。
onblur//元素失去焦點(diǎn)。
onchange//域的內(nèi)容被改變。
onclick//當(dāng)用戶點(diǎn)擊某個(gè)對(duì)象時(shí)調(diào)用的事件句柄。
ondblclick//當(dāng)用戶雙擊某個(gè)對(duì)象時(shí)調(diào)用的事件句柄。
onerror//在加載文檔或圖像時(shí)發(fā)生錯(cuò)誤。
onfocus//元素獲得焦點(diǎn)。
onkeydown//某個(gè)鍵盤(pán)按鍵被按下。
onkeypress//某個(gè)鍵盤(pán)按鍵被按下并松開(kāi)。
onkeyup//某個(gè)鍵盤(pán)按鍵被松開(kāi)。
onload//一張頁(yè)面或一幅圖像完成加載。
onmousedown//鼠標(biāo)按鈕被按下。
onmousemove//鼠標(biāo)被移動(dòng)。
onmouseout//鼠標(biāo)從某元素移開(kāi)。
onmouseover//鼠標(biāo)移到某元素之上。
onmouseup//鼠標(biāo)按鍵被松開(kāi)。
onreset//重置按鈕被點(diǎn)擊。
onresize//窗口或框架被重新調(diào)整大小。
onselect//文本被選中。
onsubmit//確認(rèn)按鈕被點(diǎn)擊。
onunload//用戶退出頁(yè)面。
值得收藏的HTML DOM事件和鼠標(biāo)鍵盤(pán)事件
altKey//返回當(dāng)事件被觸發(fā)時(shí)，"ALT" 是否被按下。
button//返回當(dāng)事件被觸發(fā)時(shí)，哪個(gè)鼠標(biāo)按鈕被點(diǎn)擊。
clientX//返回當(dāng)事件被觸發(fā)時(shí)，鼠標(biāo)指針的水平坐標(biāo)。
clientY//返回當(dāng)事件被觸發(fā)時(shí)，鼠標(biāo)指針的垂直坐標(biāo)。
ctrlKey//返回當(dāng)事件被觸發(fā)時(shí)，"CTRL" 鍵是否被按下。
metaKey//返回當(dāng)事件被觸發(fā)時(shí)，"meta" 鍵是否被按下。
relatedTarget//返回與事件的目標(biāo)節(jié)點(diǎn)相關(guān)的節(jié)點(diǎn)。
screenX//返回當(dāng)某個(gè)事件被觸發(fā)時(shí)，鼠標(biāo)指針的水平坐標(biāo)。
screenY//返回當(dāng)某個(gè)事件被觸發(fā)時(shí)，鼠標(biāo)指針的垂直坐標(biāo)。
shiftKey//返回當(dāng)事件被觸發(fā)時(shí)，"SHIFT" 鍵是否被按下。
值得收藏的HTML DOM事件和鼠標(biāo)鍵盤(pán)事件
以上內(nèi)容為互聯(lián)網(wǎng)收集感謝關(guān)注與收藏
輪事件是不同瀏覽器會(huì)有一點(diǎn)點(diǎn)區(qū)別，一個(gè)像Firefox使用DOMMouseScroll ,ff也可以使用addEventListener方法綁定DomMouseScroll事件，其他的瀏覽器滾輪事件使用mousewheel，下面我來(lái)給大家具體介紹。
Firefox使用DOMMouseScroll，其他的瀏覽器使用mousewheel。滾動(dòng)事件觸發(fā)時(shí)Firefox使用detail屬性捕捉滾輪信息，其他的瀏覽器使用wheelDelta。不知道為何在該問(wèn)題上其他廠商和微軟的如此一致。Firefox可以使用addEventListener方法綁定DomMouseScroll事件。
elem.addEventListener(‘DOMMouseScroll’, func, false);IE和其他的主流瀏覽器可以使用傳統(tǒng)的事件綁定模型。但不要使用IE專有的attachEvent方法，其他主流瀏覽器并不識(shí)別微軟的這個(gè)方法。
Firefox 鼠標(biāo)滾輪向上滾動(dòng)是-3，向下滾動(dòng)是3
IE 鼠標(biāo)滾輪向上滾動(dòng)是120，向下滾動(dòng)是-120
Safari 鼠標(biāo)滾輪向上滾動(dòng)是360，向下滾動(dòng)是-360
Opera 鼠標(biāo)滾輪向上滾動(dòng)是120，向下滾動(dòng)是-120
Chrome 鼠標(biāo)滾輪向上滾動(dòng)是120，向下滾動(dòng)是-120
有人在Safari下做了一些測(cè)試：”只是滾動(dòng)一圈的話，值為+-0.1，如果滾動(dòng)地稍微快點(diǎn)的話（多滾動(dòng)幾圈），這個(gè)值也會(huì)變大。 這是因?yàn)镸ac OS下有鼠標(biāo)滾輪加速功能。滾動(dòng)一次，瀏覽器滾動(dòng)1像素，滾動(dòng)3次，瀏覽器卻滾動(dòng)30像素”。同時(shí)他也對(duì)Camino（基于Gecko的內(nèi)核引擎）進(jìn)行研究：“與Safari相似（+- 0.3 to +-Infinity），雖然使用了與firefox相同的內(nèi)核引擎，但結(jié)果這個(gè)delta值卻只在+-2.666666里浮動(dòng)，無(wú)論滾動(dòng)速度如何
IE/Opera屬于同一類型，使用attachEvent即可添加滾輪事件。
/*IE注冊(cè)事件*/
if(document.attachEvent){
document.attachEvent('onmousewheel',scrollFunc);
}
Firefox使用addEventListener添加滾輪事件
/*Firefox注冊(cè)事件*/
if(document.addEventListener){
document.addEventListener('DOMMouseScroll',scrollFunc,false);
}
Safari與Chrome屬于同一類型，可使用HTML DOM方式添加事件
window.onmousewheel=document.onmousewheel=scrollFunc;//IE/Opera/Chrome
其中除Firefox外其余均可使用HTML DOM方式添加事件，因此添加事件使用以下方式
/*注冊(cè)事件*/
if(document.addEventListener){
document.addEventListener('DOMMouseScroll',scrollFunc,false);
}//W3C
window.onmousewheel=document.onmousewheel=scrollFunc;//IE/Opera/Chromex
下面兩個(gè)參數(shù)可以獲取滾動(dòng)的位置
document.documentElement.scrollTop：垂直方向
document.documentElement.scrollLeft：水平方向
放入監(jiān)聽(tīng)事件后就可以在鼠標(biāo)滑輪滾動(dòng)時(shí)給一些元素設(shè)置浮動(dòng)樣式
如頭條號(hào)的發(fā)表文章界面:
下滑前
下滑后
標(biāo)位置 可視區(qū)位置：clientX、clientY
滾動(dòng)條的意義——可視區(qū)與頁(yè)面頂部的距離
例子1：跟隨鼠標(biāo)的Div 消除滾動(dòng)條的影響
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>無(wú)標(biāo)題文檔</title>
<style>
#div1 {width:200px; height:200px; background:red; position:absolute;}
</style>
<script>
function getPos(ev)
{
var scrollTop=document.documentElement.scrollTop||document.body.scrollTop;
var scrollLeft=document.documentElement.scrollLeft||document.body.scrollLeft;
return {x: ev.clientX+scrollLeft, y: ev.clientY+scrollTop}; //消除滾動(dòng)條的影響
}
document.onmousemove=function (ev)
{
var oEvent=ev||event;
var oDiv=document.getElementById('div1');
var pos=getPos(oEvent);
oDiv.style.left=pos.x+'px';
oDiv.style.top=pos.y+'px';
};
</script>
</head>
<body style="height:2000px;">
<div id="div1"></div>
</body>
</html>實(shí)例2:一串跟隨鼠標(biāo)的Div
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>無(wú)標(biāo)題文檔</title>
<style>
div {width:10px; height:10px; background:red; position:absolute;}
</style>
<script>
function getPos(ev)
{
var scrollTop=document.documentElement.scrollTop||document.body.scrollTop;
var scrollLeft=document.documentElement.scrollLeft||document.body.scrollLeft;
return {x: ev.clientX+scrollLeft, y: ev.clientY+scrollTop};
}
document.onmousemove=function (ev)
{
var aDiv=document.getElementsByTagName('div');
var oEvent=ev||event;
var pos=getPos(oEvent);
for(var i=aDiv.length-1;i>0;i--)
{
aDiv[i].style.left=aDiv[i-1].offsetLeft+'px';
aDiv[i].style.top=aDiv[i-1].offsetTop+'px';
}
aDiv[0].style.left=pos.x+'px';
aDiv[0].style.top=pos.y+'px';
};
</script>
</head>
<body>
<div></div>
<div></div>
<div></div>
</body>
</html>實(shí)例3：屏蔽鼠標(biāo)右鍵
方法1：使用鼠標(biāo)事件的button屬性
鼠標(biāo)事件中button的值在各個(gè)瀏覽器上大相徑庭,但非常幸運(yùn)的是按下鼠標(biāo)右鍵時(shí)值都為2;
<html>
<head>
<title>屏蔽鼠標(biāo)右鍵</title>
<script language="javascript">
function block(oEvent){
if(window.event)
oEvent = window.event;
if(oEvent.button == 2)
alert("鼠標(biāo)右鍵不可用");
}
document.onmousedown = block;
</script>
</head>
<body>
<p>屏蔽鼠標(biāo)右鍵</p>
</body>
</html>
Firefox舊版本不支持,經(jīng)過(guò)嚴(yán)格測(cè)試,最新版本的IE、360、Firefox瀏覽器都已支持
方法二:(以下火狐和chome瀏覽器不支持,IE和360支持)
<body oncontextmenu="return false;">
</body>
<body oncontextmenu="alert('010-123456789');return false">
</body>
<body oncontextmenu="return test()">
<script>
function test(){
alert('010-123456789');
return false;
</script>
</body>方法三：瀏覽器兼容性最好,不用彈出警告框, 推薦使用
<html>
<head>
<title>屏蔽鼠標(biāo)右鍵</title>
<script language="javascript">
function block(oEvent){
if(window.event){
oEvent = window.event;
oEvent.returnValue = false; //取消默認(rèn)事件,兼容IE8以下瀏覽器
}else
oEvent.preventDefault(); //取消默認(rèn)事件,兼容標(biāo)準(zhǔn)的DOM瀏覽器,IE9瀏覽器已支持
}
document.oncontextmenu = block;
</script>
</head>
<body>
<p>屏蔽鼠標(biāo)右鍵</p>
</body>
</html>自定義鼠標(biāo)右鍵
*請(qǐng)認(rèn)真填寫(xiě)需求信息，我們會(huì)在24小時(shí)內(nèi)與您取得聯(lián)系。
