鼠标移动激活时显示文本

Display text when mousemove active

本文关键字：显示 文本 激活 移动 鼠标      更新时间：2023-09-26

我想在一个段落中显示true，当鼠标移动是活动的，false时，它不是活动的。尝试if语句，但没有工作

$(document).ready(function() {
    var Clickcount = 1;
    $(".chimp").mousemove(function(e) {
        if (Clickcount % 2) {
            $('.chimp').css({
                'top': e.clientY - 20,
                'left': e.clientX - 20
            });
        }
    });
    $("body").mousemove(function(e) {
        var x = e.pageX - this.offsetLeft;
        var y = e.pageY - this.offsetTop;
        $(".cords").html("clientX " + x + " clientY= " + y);
    });
    $(document.body).on('click', function() {
        Clickcount++;
    });
});

我不太确定你对mousemove is active的意思。如果你想检查鼠标是否在一个特定的元素内，你可以使用这样的命令:

$(".chimp").hover(function () {
    $("#bool").text('true');  
},function () {
    $("#bool").text('false');  
});

但是如果您想要检测鼠标是否已经停止移动，您可以尝试使用以下代码片段:

var timeout;
$(".chimp").mousemove(function () {
    $("#bool").text('true');  
    clearTimeout(timeout);
    timeout = setTimeout(function() {
        $("#bool").text('false');  
    }, 1000);
});

当鼠标1秒未移动时触发。您可以轻松地调整阈值，只需在timeout -函数中编辑数字。

用"html"代替"body"

    $("html").mousemove(function(e) {
        var x = e.pageX - this.offsetLeft;
        var y = e.pageY - this.offsetTop;
        $(".cords").html("clientX " + x + " clientY= " + y);
    });
.cords {
  width: 20em;
  height: 2em;
  }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<div class="cords"></div>

给你 

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Drag Me</title>  
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<style>
#dragg
{
    position: absolute;
    background-color: red;
    height: 200px;
    width: 200px;
}
p{
  position: relative;
  top: 210px;
  right: 5px;
}
</style>
</head>
<body>
<div id="dragg">
red
</div>
<p id="bool"></p>
<script>
$(document).ready(function () {
        $('#dragg').on({
            mousedown: function (e) {
                $(window).data({
                    down:true,
                    oX: e.offsetX,
                    oY: e.offsetY,
                    el:this
                })
            },
            mouseup: function (e) {
                $(window).data('down',false)
            },
        })
        $(window).on({
            mousemove: function (e) {
                var data=$(window).data()
                if (data.down) {
          $("#bool").text('true'); 
                    $(data.el).css({
                        left: e.clientX - data.oX,
                        top: e.clientY - data.oY
                    });
                }
        else{
          $("#bool").text('false'); 
        }
            },
        })
});
</script>
</body>
</html>
相关文章：