js_判断鼠标是否在div上

https://stackoverflow.com/questions/18320190/without-jquery-i-need-to-find-out-if-the-mouse-is-over-an-element-not-determine

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="../js/jquery-3.3.1.min.js"></script>
    <style>
        #t {
            /* for illustrative purposes */
            width: 200px;
            height: 200px;
            border: red solid 1px;
        }
        #t:hover {
            overflow: hidden;
        }
    </style>
</head>
<body>


<div id="t">dcscsds</div>
<script>
    setTimeout(function() {
        var c = window.getComputedStyle(document.getElementById('t')).getPropertyValue('overflow');
        if (c === 'hidden') {
            alert('Mouse in box');
        } else {
            alert('Mouse not in box');
        }
    }, 3000);
</script>
</body>
</html>
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
判断鼠标是否在一个 `<div>` 区域内,可以使用以下方法: 1. 使用 JavaScript 监鼠标移动事件。通过 `mousemove` 事件来捕获鼠标在页面上的移动。 2. 在事件处理函数中获取鼠标的坐标。可以通过 `event.pageX` 和 `event.pageY` 属性获取鼠标相对于文档页面的坐标。 3. 获取目标 `<div>` 的位置和尺寸信息。可以使用 `getBoundingClientRect()` 方法获取目标 `<div>` 元素相对于视口的位置和尺寸信息。 4. 比较鼠标坐标和目标 `<div>` 的位置信息。可以使用鼠标的坐标与目标 `<div>` 的左上角和右下角的坐标进行比较,判断鼠标是否在目标 `<div>` 区域内。 下面是一个简单的示例代码: ```javascript // 获取目标 <div> 元素 var divElement = document.getElementById('targetDiv'); // 监听鼠标移动事件 document.addEventListener('mousemove', function(event) { // 获取鼠标坐标 var mouseX = event.pageX; var mouseY = event.pageY; // 获取目标 <div> 的位置和尺寸信息 var divRect = divElement.getBoundingClientRect(); var divLeft = divRect.left; var divTop = divRect.top; var divRight = divRect.right; var divBottom = divRect.bottom; // 判断鼠标是否在目标 <div> 区域内 if (mouseX >= divLeft && mouseX <= divRight && mouseY >= divTop && mouseY <= divBottom) { console.log('鼠标在目标 <div> 区域内'); } else { console.log('鼠标不在目标 <div> 区域内'); } }); ``` 在代码中,我们首先获取目标 `<div>` 元素,并使用 `addEventListener` 方法监听 `mousemove` 事件。在事件处理函数中,我们获取鼠标的坐标和目标 `<div>` 的位置信息,然后进行比较判断。如果鼠标在目标 `<div>` 区域内,就会输出相应的信息。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值