jq: 事件-鼠标-优快云博客

本文链接：https://blog.youkuaiyun.com/u012872771/article/details/103666525

点击

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