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