如何让mouseup在任何地方开火?

时间:2016-11-06 21:37:22

标签: javascript drag-and-drop

我有一个相对功能的拖放脚本。但是,我希望能够在屏幕上的任何位置触发鼠标。有没有办法在窗口外或当前元素之外触发鼠标?我知道这是可能的,我也见过这样的其他问题。我想在vanilla Javascript中找到一种方法来检测像这样的mouseup。

document.onmousemove = mouseCoords;

var x = 0;
var y = 0;
var cl1= false;
var divid;
var offs1;
var offs2;
var topPos;
var leftPos;

function mouseCoords(e) {
    x = e.x
    y = e.y
    if(cl1 === true){
		document.getElementById(divid).style.top = topPos + (y-offs1) + 'px';
		document.getElementById(divid).style.left = leftPos + (x-offs2) + 'px';
	}
}
var drag = function(i, cas) {
	divid= i
	switch(cas){
		case 1:
			var rect = document.getElementById(divid).getBoundingClientRect();
			leftPos = rect.left;
			topPos = rect.top;
			offs1 = y;
			offs2 = x;
			cl1= true;
		break;
		case 0:
			offs1 = 0;
			offs2 = 0;
			cl1= false;
		break;
	}
}
#block{
  width: 100px; z-index: 20; height: 50px; background-color: blue; position: fixed; user-select: none; -webkit-user-select: none; 
}
.drag{
width: 200px; height: 100px; background-color: red; position: fixed;
}
<div id="block">mouseup doesn't trigger over me!</div>
<div id="1" class="drag" onmousedown="drag(1, 1)" onmouseup="drag(1, 0)"></div>

1 个答案:

答案 0 :(得分:1)

使用

document.addEventListener("mouseup", drag(null, 0)); 对于mouseup

mousedown的此代码。

document.addEventListener("mousedown", drag(null, 1));

基本上,document.addEventListener适用于整个窗口。 "mouseup"告诉脚本该事件是mouseup,最后一位是要执行的函数(拖(1,0))