event事件和事件冒泡+鼠标移动

event事件和事件冒泡

    document.onclick=function(ev){

        /*if (ev) {

            alert(ev.clientX+','+ev.clientY)
        }
        else
        {
            alert(event.clientX+','+event.clientY)
        };*/
        var oEvent=ev||event

        alert(oEvent.clientX+','+oEvent.clientY)
    }

取消事件冒泡

    <script type="text/javascript">
        window.onload=function()
        {

            var oBtn= document.getElementById('btn1');
            var oDive= document.getElementById('div1');

            oBtn.onclick=function(ev){

                var oEvent=ev||event
                oDive.style.display="block";

                oEvent.cancelBubble=true;
            }

            document.onclick=function(){

                oDive.style.display="none"
            }
        }
    </script>
    <input type="button" id="btn1">
    <div id="div1" style="width:100px;height:150px;background:#ccc;display:none;"></div>

 跟随鼠标移动

<style type="text/css">
    #div1{ position: absolute; width:100px;height:100px;background:red;}
    </style>
<script type="text/javascript">
    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';
    }
    </script>
<div id="div1"></div>

 一串移动

<style>
div {width:10px; height:10px; background:red; position:absolute;}
</style>
<script type="text/javascript">
    window.onload=function(){

        var oDiv=document.getElementsByTagName('div');
        var i=0;

        document.onmousemove=function(ev){

            var oEvent=ev||event;

            for(i=oDiv.length-1;i>0;i--)
            {
                oDiv[i].style.left=oDiv[i-1].style.left;
                oDiv[i].style.top=oDiv[i-1].style.top;
            }
            oDiv[0].style.left=oEvent.clientX+'px';
            oDiv[0].style.top=oEvent.clientY+'px';
        }
    }
</script>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>