JS事件基础和中级

最新推荐文章于 2024-11-07 13:38:59 发布

-Y、

最新推荐文章于 2024-11-07 13:38:59 发布

阅读量89

点赞数

分类专栏： javascript 文章标签： javascript css js

本文链接：https://blog.csdn.net/weixin_44776706/article/details/105409742

版权

javascript 专栏收录该内容

20 篇文章 0 订阅

订阅专栏

===========================================================================

需要加全局事件就加在document.后面

获取event对象：
会自动获取为真的一项实现兼容

Event 对象代表事件的状态，比如事件在其中发生的元素、键盘按键的状态、鼠标的位置、鼠标按钮的状态。一旦事件发生,便会生成Event对象，如单击一个按钮，浏览器的内存中就产生相应的 event对象。

var oevent=event||window.event

阻止事件冒泡影响

oevent.cancelBubble==true

每次使用clientY时最好加上scrollTop，否则会有问题，
因为clientY和clientX，都是根据可视区来获取位置信息的

 var oscrolltop=document.documentElement.scrollTop
 odiv.style.left=oevent.clientX+'px';
 odiv.style.top=oevent.clientY+oscrolltop+'px';

鼠标后面的有一串东西跟着：

function getpos(oevent){
            var oscrollTop=document.documentElement.scrollTop
            var oscrollLeft=document.documentElement.scrollLeft           
            return{x:oevent.clientX+oscrollLeft,y:oevent.clientY+oscrollTop}
        }
                    
            document.onmousemove=function(){

                        
                     var oevent=event;
                    var odiv=document.getElementsByTagName('div');
                   var pos=getpos(oevent)
                    
                   for(var i=odiv.length-1;i>0;i--)
                   {    

                       odiv[i].style.left=odiv[i-1].offsetLeft+'px'
                       odiv[i].style.top=odiv[i-1].offsetTop+'px'
                   }
                    odiv[0].style.left=pos.x+'px'
                    odiv[0].style.top=pos.y+'px'

                   
            }

===========================================================================

通过点击ctrl和回车来添加新的文本：

 window.onload=function(){
            var otxt=document.getElementById('txt1')
            var otxtarea=document.getElementById('txt2')


            otxt.onkeydown=function(){

                var oevent=event
             
                if(oevent.keyCode==13&&oevent.ctrlKey)//还有shiftKey 、altKey
                {
                    otxtarea.value+=otxt.value+'\n'
                    otxt.value='';
                }

            }

        }

===========================================================================

自定义右击菜单：
看注释

 window.onload=function(){
            
            var odiv=document.getElementById('div1')
            var oul=odiv.getElementsByTagName('ul')[0]
            var oli=oul.getElementsByTagName('li')[0]
            
            document.oncontextmenu=function(){//ontextmenu事件是右击事件
                var oevent=event
                var oscrolltop=document.documentElement.scrollTop
                var oscrollleft=document.documentElement.scrollLeft
                odiv.style.display='block'
				
				//为了在滚动页面的时候也跟随鼠标移动
                odiv.style.left=event.clientX+oscrollleft+'px'
                odiv.style.top=event.clientY+oscrolltop+'px'

                return false//取消浏览器原本的默认行为
                
            }

            document.onclick=function(){
                            
                odiv.style.display='none'
                
            }
        }
        
           
    </script>
</head>
<body style="height: 5000px; width: 5000px;">
    <div id="div1">
        <ul>
            <li>自动排列</li>
            <li>图标显示</li>
            <li>右击</li>
            <li>左击</li>
            <li>属性</li>
        </ul>
    </div>
 
</body>

==============================================================================

拖拽物体：

有滚动的情况下：

滚动距离=document.documentElement.scrollLeft
oleft=（滚动距离）+document.documentElement.clientWidth-odiv.offsetWidth

例子原理图：
在这里插入图片描述

注释重要：

<script>
        window.onload=function(){
            var odiv=document.getElementById('div1')
            

            odiv.onmousedown=function(){
                var oevent=event
                var disX=oevent.clientX-odiv.offsetLeft//获取div中鼠标的位置
                var disY=oevent.clientY-odiv.offsetTop

                document.onmousemove=function(){
                    var oevent=event
                    var oleft=oevent.clientX-disX//用鼠标的新位置减去，鼠标在div中的位置，获得div在document中的位置
                    var otop=oevent.clientY-disY

                    //封边界
                    if(oleft<0)
                    {
                        oleft=0
                    } 
                    else if(oleft>document.documentElement.scrollLeft+document.documentElement.clientWidth-odiv.offsetWidth)
                    //div在document（可视区）的数据，不能大于document（可视区）整体加上滚动距离，减去div整体的数据
                    {
                        oleft=document.documentElement.scrollLeft+document.documentElement.clientWidth-odiv.offsetWidth//加上滚动距离
                    }

                    if(otop<0)
                    {
                        otop=0
                    }
                    else if(otop>document.documentElement.scrollTop+document.documentElement.clientHeight-odiv.offsetHeight)
                    {
                        otop=document.documentElement.scrollTop+document.documentElement.clientHeight-odiv.offsetHeight
                    }
                   
                    
                    odiv.style.left=oleft+'px'
                    odiv.style.top=otop+'px'
                }
                document.onmouseup=function(){
                   
                    document.onmousemove=null//消除当松开鼠标也松开移动函数
         

                }
                return false//为了在选中的时候不要触发其他事件
            }

        }
    </script>