Question

如何让JavaScript触发onMouseEnter - 目标<div> - 事件的事件，而另一个拖动的<div>进入元素（按下鼠标按钮）？

由于多种原因，我无法使用onDrag...事件......

Answer 1

您应该监听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");
        }
    });
});

您可以查看此fiddle

上的工作示例

Answer 2

我做了一个小片段，检查出来：

＆＃13;

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

＆＃13;

鼠标拖动应该有效。

无论如何是一个工作场所：

是否保持一个跟踪鼠标按下事件的布尔值。

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

发布时将布尔标志设置为false。

当鼠标输入偶数时，检查标志。

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

2 个答案: