首页 > 网站 > WEB开发 > 正文

鼠标点击不同位置触发的事件

2024-04-27 15:03:37
字体:
来源:转载
供稿:网友

自己用jquery简单的写了一个根据鼠标在不同位置的点击而在不同位置出现提示框的小程序,其中加了在窗口边缘处点击事件的判断。

下面是代码。

<!DOCTYPE html><html><head>    <meta charset="UTF-8">    <title></title>    <style>        .div1{            border:1px solid red;            width:150px;            height:400px;            display:none;            position:absolute;            left:0px;            top:100px;        }    </style></head><body><div class="div1">我是弹出框中的内容</div><script src="jquery.js"></script><script>    document.onclick=function(event){//        获取浏览器窗口的宽高        var height = $(window).height();        var width = $(window).width();//        获取鼠标点击的位置        var left = event.clientX;        var top = event.clientY;//        获取显示方块的宽高        var height1 = $('.div1').height();        var width1 = $('.div1').width();//        计算出弹出框显示的位置        if(left+width1>width) {            left = width - width1-10+'px';        }        if(top+height1>height) {            top = height - height1-10+'px';        }        $(".div1").CSS({"display":'block',"left":left,"top":top});    }</script></body></html>
发表评论 共有条评论
用户名: 密码:
验证码: 匿名发表