点击
在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>