jQuery事件对象

最新推荐文章于 2024-04-07 10:28:17 发布

小可同学啊

最新推荐文章于 2024-04-07 10:28:17 发布

阅读量89

点赞数

分类专栏：前端文章标签： jquery javascript

本文链接：https://blog.csdn.net/m0_55041880/article/details/115496890

版权

前端专栏收录该内容

61 篇文章 0 订阅

订阅专栏

这篇博客展示了如何使用jQuery实现一个div元素，使其可以通过键盘的上下左右键移动，同时也能通过鼠标拖放操作来改变位置。示例代码详细解释了事件监听和处理，包括鼠标和键盘事件的绑定、坐标处理以及事件处理函数中的关键方法。

摘要由CSDN通过智能技术生成

事件对象event：与原生js一样，JQ的事件对象也是第一个参数ev，但没有兼容问题：

$(‘div’).on(‘click’,{name:‘hello’},function(ev){ //ev : event对象
ev.data.name; //获取数据{name:‘hello’}的name属性
ev.target; //获取事件源
ev.type; //获取事件类型
ev.pageX; //(相对于文档的X轴) 鼠标坐标
ev.pageY; //(相对于文档的Y轴) 鼠标坐标
ev.clientX; //(相对于可视区X轴) 鼠标坐标
ev.clientY; //(相对于可视区Y轴) 鼠标坐标
ev.which; //原生的keyCode：键盘按键
ev.preventDefault(); //阻止浏览器默认事件
ev.stopPropagation(); //阻止事件冒泡的操作
return false; //阻止默认事件 + 阻止冒泡的操作
});

利用jQuery实现div可以通过键盘上下左右移动也可以通过鼠标拖放效果

在这里插入代码片<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div{
            width: 150px;
            height: 150px;
            background-color: brown;
            position: absolute;
            left: 0;
            top: 0;
        }
    </style>
</head>
<body>
    <div></div>
    <script src="jquery.js"></script>
    <script>
        // 这个div可以通过键盘上下左右移动 也可以通过鼠标拖放
        $("div").mousedown(function (ev){
            var disX = ev.pageX - $("div")[0].offsetLeft;
            var disY = ev.pageY - $("div")[0].offsetTop;
            $(document).on("mousemove",(function (ev){
                $("div").css("left",ev.pageX-disX + "px");
                $("div").css("top",ev.pageY-disY + "px");
            }))
            $(document).on("mouseup",(function (){
                $(document).off("mousemove mouseup");
            }))
        })
        var bL = false,bT=false,bR=false,bB=false;
        setInterval(function (){
            if(bL){
                $("div").css("left",$("div").offset().left-5+"px"); 
            }
            if(bT){
                $("div").css("top",$("div").offset().top-5+"px"); 
            }
            if(bR){
                $("div").css("left",$("div").offset().left+5+"px"); 
            }
            if(bB){
                $("div").css("top",$("div").offset().top+5+"px"); 
            }
        },30)
        $(document).on("keydown",function (ev){
            switch(ev.which){
                case 37 : bL = true;break;
                case 38 : bT = true;break;
                case 39 : bR = true;break;
                case 40 : bB = true;break;
            }
        })
        $(document).on("keyup",function (ev){
            switch(ev.which){
                case 37 : bL = false;break;
                case 38 : bT = false;break;
                case 39 : bR = false;break;
                case 40 : bB = false;break;
            }
        })
    </script>
</body>
</html>