如何按住鼠标按钮时触发onMouseEnter？

问题描述：

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

因为一些原因我不能使用onDrag...事件......

例子：https://jsfiddle.net/5dgnez9e/3/

它对我的Chrome 46工作正常。也许，你能提供我们的代码吗？ – Anakin

谢谢，我提供了一个小提琴。 – Benvorth

因此，它适用于纯鼠标，但不适用于正在拖动的元素。 – Anakin

答

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

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

鼠标拖动应该工作。

反正一个workaound：

是保持一个boolean值，跟踪鼠标按下事件。

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

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

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

答

你应该在文件侦听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

谢谢，我用你的建议更新了我的小提琴 - 仍然没有工作... – Benvorth

问题在于，在拖拽元素时并不会触发'mouseEnter' – Benvorth

这就是为什么您需要使用onmousedown和onmouseup而不是可拖动的原因。 – Burimi

如何按住鼠标按钮时触发onMouseEnter？

相关推荐