JS事件

時間 2019-11-07

原文原文鏈接

1.eventcss

document.onclick = function () {
        alert(event.clientX+","+event.clientY);
    };

會發如今谷歌,IE下正常，可是在火狐下面不正常，在火狐下面能夠這麼寫html

 document.onclick = function (ev) {
        alert(ev.clientX+","+ev.clientY);
    };

這個EV是什麼了，咱們alert(ev)看看瀏覽器

會發現是一個鼠標事件佈局

爲了兼容咱們能夠以下作spa

 document.onclick = function (ev) {
        if (ev) {
            alert(ev.clientX + "," + ev.clientY);
        }
        else {
            alert(event.clientX + "," + event.clientY);
        }
    };

這樣看起來不是很簡潔，咱們更能夠採用或運算3d

document.onclick = function (ev) {
        var oEvent = ev || event;
        alert(oEvent.clientX + "," + oEvent.clientY);
    };

2.事件冒泡code

HMTL：htm

<input id="btn1" type="button" value="顯示" />
<div id="div1">
</div>

爲了方便查看，稍微給點樣式：blog

#div1 {width:100px; height:150px; background:#CCC; display:none;}

JS部分爲事件

var oBtn=document.getElementById('btn1');
    var oDiv=document.getElementById('div1');
    
    oBtn.onclick=function (ev)
    {
        var oEvent=ev||event;
        oDiv.style.display='block';
        oEvent.cancelBubble=true;//這裏取消冒泡
    };
    
    document.onclick=function ()
    {
        oDiv.style.display='none';
    };

若是咱們不加oEvent.cancelBubble=true,會發現點擊按鈕沒反應，由於按鈕處於document,事件冒泡DOCUMENT使之不顯示了

3.根據鼠標移動的DIV

HTML爲：

<body style="height:2000px;">
  <div id="div1"></div>
</body>

CSS爲：

 #div1{width:100px;height:100px;background:red;position:absolute;}

JS爲：

document.onmousemove = function (ev) {
        var oEvent = ev || event;
        var oDiv = document.getElementById("div1");
        var scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
        var scrollLeft = document.documentElement.scrollLeft || document.body.scrollLeft;
        oDiv.style.left = oEvent.clientX + scrollLeft+"px";
        oDiv.style.top = oEvent.clientY + scrollTop+"px";
    }

這樣就完成了一個跟隨鼠標移動的紅色DIV

4 跟着鼠標移動的DIV

<div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
          ......

CSS:

 div {
            width: 10px;
            height: 10px;
            background: red;
            position: absolute;
        }

JS:

var aDiv = document.getElementsByTagName("div");
    var i = 0;
    document.onmousemove=function(ev){
    var oEvent = ev || event;
    for (i = aDiv.length - 1; i > 0; i--) {
        aDiv[i].style.left = aDiv[i - 1].style.left;
        aDiv[i].style.top = aDiv[i - 1].style.top;
    }
    aDiv[0].style.left = oEvent.clientX + 'px';
    aDiv[0].style.top = oEvent.clientY + 'px';
    }

5.offsetWidth：元素的寬度 offsetHeight 元素的高度

<div id="div1"></div>

css:

   #div1 {
            width: 100px;
            height: 100px;
            background: red;
        }

JS:

var oDiv = document.getElementById("div1");
    alert(oDiv.offsetWidth);

彈出100；

咱們改變下樣式

 #div1 {
            width: 100px;
            height: 100px;
            background: red;
            border:1px solid black;padding:10px;
        }

彈出122，爲div的寬度+2條邊框+2邊的內邊距

咱們再在後面加上margin:20px;彈出的仍舊是122，與外邊距無關

offsetHeight用法相似

6.offsetLeft 元素離瀏覽器左邊的距離

咱們來作一個左右鍵控制div的移動

document.onkeydown = function (ev) {
        var oEvent = ev || event;
        var oDiv = document.getElementById("div1");
        if (oEvent.keyCode == 37) {
            oDiv.style.left = oDiv.offsetLeft - 10 + 'px';
        }
        else if (oEvent.keyCode == 39) {
            oDiv.style.left = oDiv.offsetLeft+10 + 'px';
        }
    }

7. ctrl+enter留言本

html:

<textarea id="txt1" rows="10" cols="40"></textarea><br />
<input id="txt2" type="text" />
<input id="btn1" type="button" value="留言" />

JS:

window.onload=function ()
{
    var oBtn=document.getElementById('btn1');
    var oTxt1=document.getElementById('txt1');
    var oTxt2=document.getElementById('txt2');
    
    oBtn.onclick=function ()
    {
        oTxt1.value+=oTxt2.value+'\n';
        oTxt2.value='';
    };
    
    oTxt2.onkeydown=function (ev)
    {
        var oEvent=ev||event;
        
        if(oEvent.ctrlKey && oEvent.keyCode==13)
        {
            oTxt1.value+=oTxt2.value+'\n';
            oTxt2.value='';
        }
    };
};

這樣點擊提交按鈕或者ctrl+enter就能提交文本框內容了

8.自定義右鍵菜單：

咱們須要先屏蔽系統自己的右鍵菜單，而後讓咱們本身定義的菜單顯示

咱們須要先佈局一個右鍵菜單

<ul id="ul1">
    <li>登錄</li>
    <li>回到首頁</li>
    <li>註銷</li>
    <li>加入VIP</li>
</ul>

CSS:

* {margin:0; padding:0;}
#ul1 {width:100px; background:#CCC; border:1px solid black; position:absolute; display:none;}

JS:

document.oncontextmenu=function (ev)
{
    var oEvent = ev || event;
    var scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
    var scrollLeft = document.documentElement.scrollLeft || document.body.scrollLeft;
    var oUl=document.getElementById('ul1');
    
    oUl.style.display='block';
    oUl.style.left=oEvent.clientX+scrollLeft+'px';
    oUl.style.top=oEvent.clientY+scrollTop+'px';
    
    return false;
};

document.onclick=function ()
{
    var oUl=document.getElementById('ul1');
    
    oUl.style.display='none';
};

9.只能輸入數字的文本框

window.onload=function ()
{
    var oTxt=document.getElementById('txt1');
    
    oTxt.onkeydown=function (ev)
    {
        var oEvent=ev||event;
        
        //alert(oEvent.keyCode);
        
        //0        48
        //9        57
        //退格    8
        
        if(oEvent.keyCode!=8 && (oEvent.keyCode<48 || oEvent.keyCode>57))
        {
            return false;
        }
        
        //return false;
    };
};

這裏沒有判斷小鍵盤的狀況。

10 div的拖拽

<div id="div1"></div>

css:

#div1 {width:100px; height:100px; background:red; position:absolute;}

var oDiv=document.getElementById('div1');
    
    var disX=0;
    var disY=0;
    
    oDiv.onmousedown=function (ev)
    {
        var oEvent=ev||event;
        
        disX=oEvent.clientX-oDiv.offsetLeft;
        disY=oEvent.clientY-oDiv.offsetTop;
    };
    
    oDiv.onmousemove=function (ev)
    {
        var oEvent=ev||event;
        
        oDiv.style.left=oEvent.clientX-disX+'px';
        oDiv.style.top=oEvent.clientY-disY+'px';
    };

咱們發現咱們鼠標並無按下，它也在跟着移動

作如下完善：

var oDiv=document.getElementById('div1');
    
    var disX=0;
    var disY=0;
    
    oDiv.onmousedown=function (ev)
    {
        var oEvent=ev||event;
        
        disX=oEvent.clientX-oDiv.offsetLeft;
        disY=oEvent.clientY-oDiv.offsetTop;
        
        oDiv.onmousemove=function (ev)
        {
            var oEvent=ev||event;
            
            oDiv.style.left=oEvent.clientX-disX+'px';
            oDiv.style.top=oEvent.clientY-disY+'px';
        };
        
        oDiv.onmouseup=function ()
        {
            oDiv.onmousemove=null;
            oDiv.onmouseup=null;
        };
    };

可是這樣拖快了咱們發現鼠標移到DIV外面去了，不受控制了，作以下修改

document.documentElement.clientWidth爲可視區域的寬

var oEvent=ev||event;
        
        disX=oEvent.clientX-oDiv.offsetLeft;
        disY=oEvent.clientY-oDiv.offsetTop;
        
        document.onmousemove=function (ev)
        {
            var oEvent=ev||event;
            var l=oEvent.clientX-disX;
            var t=oEvent.clientY-disY;
            
            if(l<0)
            {
                l=0;
            }
            else if(l>document.documentElement.clientWidth-oDiv.offsetWidth)
            {
                l=document.documentElement.clientWidth-oDiv.offsetWidth;
            }
            
            if(t<0)
            {
                t=0;
            }
            else if(t>document.documentElement.clientHeight-oDiv.offsetHeight)
            {
                t=document.documentElement.clientHeight-oDiv.offsetHeight;
            }
            
            oDiv.style.left=l+'px';
            oDiv.style.top=t+'px';
        };
        
        document.onmouseup=function ()
        {
            document.onmousemove=null;
            document.onmouseup=null;
        };
        
        return false; //阻止冒泡事件。火狐低版本有可能出現。
    };

這樣怎麼也不會拖到可視區外面去。

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。