如何在按下鼠标按钮时触发' onMouseEnter '

How to fire `onMouseEnter` while mouse-button is pressed?

本文关键字：onMouseEnter 按钮 鼠标      更新时间：2023-09-26

如何使JavaScript触发目标<div> -元素的onMouseEnter -事件，而另一个拖动的<div>进入元素(按下鼠标按钮)?

由于几个原因，我不能使用onDrag...事件…

示例:https://jsfiddle.net/5dgnez9e/3/

您应该在文档中监听mousedown和mouseup，并将鼠标状态存储在一个全局变量中，然后您可以在元素的mouseenter事件中检查状态

$(document).ready(function(){
    var mouseClicked = false;
    document.body.onmousedown = function() { 
      mouseClicked = true;
    }
    document.body.onmouseup = function() {
      mouseClicked = false
    }
    $(".element").on("mouseenter",function(){
        if(mouseClicked){
            console.log("entered");
        }
    });
});

您可以查看此提琴的工作示例

我做了一个小片段，看看:

<!DOCTYPE HTML>
<html>
<head>
<style>
#div1 {width:160px;height:160px;padding:10px;border:1px solid #aaaaaa;}
</style>
<script>
function allowDrop(ev) {
    ev.preventDefault();
}
function drag(ev) {
    ev.dataTransfer.setData("text", ev.target.id);
}
function drop(ev) {
    ev.preventDefault();
    var data = ev.dataTransfer.getData("text");
    ev.target.appendChild(document.getElementById(data));
}
</script>
</head>
<body>
<p>Drag the image into the rectangle:</p>
<div id="div1" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
<br>
<img id="drag1" src="https://upload.wikimedia.org/wikipedia/commons/thumb/e/e2/Google_Chrome_icon_(2011).svg/2000px-Google_Chrome_icon_(2011).svg.png" draggable="true" ondragstart="drag(event)" width="120" height="120">
</body>
</html>

鼠标拖动应该可以工作。

无论如何，一个解决方法:

是维护一个布尔值，用来跟踪鼠标按下事件。

当按下时，设置布尔标志为true。

释放时设置布尔标志为false。

触发鼠标进入偶数时，检查标志

相关文章：