jq: 事件-鼠标

2024-08-20 16:48

文章标签 事件鼠标 jq

本文主要是介绍jq: 事件-鼠标，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

点击

在js中，绑定事件函数要具体到元素，如

        <ul><li>1</li><li>2</li>
</ul>
<script>var li0 = document.getElementsByTagName('li')[0];li0.onclick = function() {console.log(this.innerText)}
</script>

所以在jq中同理，可以利用this，点击谁，获取谁的元素，再放入到jq对象即可使用对应的方法，如:

        <ul><li>1</li><li>2</li>
</ul>
<script src="../jquery-3.4.1.js"></script>
<script>$('li').click(function() {console.log($(this).text());})
</script>

事件函数中的event参数

event.pageX 获取浏览器到当前的x轴位置

event.pageY 获取浏览器到当前的y轴位置

        $('.item').click(function(e) {console.log(`x轴位置:${e.pageX} y轴位置:${e.pageY} `);
})

event.which 判断点击的左键中键右键

event.which = 1 鼠标左键

event.which = 2 鼠标中键

event.which = 3 鼠标右键

contextmenu = false 函数可以取消右键菜单弹出

        $(document).contextmenu(function() { // 防止右键菜单弹出
    return false;
})$(document).mousedown(function(e) {console.log(e.which);
})

click 单机事件

dblclick 双击事件

移动

mouseenter/mouseleave 鼠标进入/鼠标离开

        $('.item').mouseenter(function() {console.log('鼠标移入')
}).mouseleave(function() {console.log('鼠标移出')
})

是否冒泡: 不冒泡

        $('.item').mouseenter(function() {console.log('item鼠标移入')
}).mouseleave(function() {console.log('item鼠标移出')
})$('.box').mouseenter(function() {console.log('box鼠标移入')
}).mouseleave(function() {console.log('box鼠标移出')
})

mouseover/mouseout 鼠标进入/鼠标离开(会冒泡)

        $('.item').mouseover(function() {console.log('item鼠标移入')
}).mouseout(function() {console.log('item鼠标移出')
})$('.box').mouseover(function() {console.log('box鼠标移入')
}).mouseout(function() {console.log('box鼠标移出')
})

鼠标进入item中，触发冒泡，box的进入事件函数也被调用。

鼠标离开item中，触发冒泡，box的离开事件也被调用，然后进入到了box区域中(因为依然还在这里)。

mousedown 鼠标按下

mouseup 鼠标抬起

拖拽:

        <style>.item {position: relative;width: 100px;height: 100px;background: orange;}
</style>
</head>
<body>
<div class="item">test</div>
<script src="../jquery-3.4.1.js"></script>
<script>$('.item').mousedown(function(e) {var offset = $(this).offset();  // 定义盒子的边框
      var dis = {};                   // 创建一个存放鼠标到盒子边框的位置
      dis.x = e.pageX - offset.left;  // 鼠标到盒子左边距离
      dis.y = e.pageY - offset.top;   // 鼠标到盒子右边距离
      var _this = this;               // 盒子的this
      $(document).mousemove(function(e) {$(_this).css({              // 盒子的样式
                left: e.pageX - dis.x, // 移动到新位置 - 鼠标到盒子的距离 = 盒子定位的位置
                top: e.pageY - dis.y,})}).mouseup(function() {         // 鼠标抬起后
      $(this).off('mousemove mouseup') // 取消移动和抬起事件
            })return false; // 防止文字被选中
        })</script>