我有一个可拖动的div，它也可以充当链接。目前，在拖动div 后释放鼠标后，它会打开链接。我希望链接仅在单击时打开，而不是被拖动和释放
有人有什么建议吗？
<div id="draggable"><div id="draggableimg"><a href="events.html"><img src="Events.png"/></a></div></div>
#draggable {
position: absolute;
top: 100px;
left: 100px;
}
#draggableimg img {
width: 300px;
}
//Make the DIV element draggable:
dragElement(document.getElementById("draggable"));
function dragElement(elmnt) {
var pos1 = 0, pos2 = 0, pos3 = 0, pos4 = 0;
if (document.getElementById(elmnt.id + "img")) {
/* if present, the header is where you move the DIV from:*/
document.getElementById(elmnt.id + "img").onmousedown = dragMouseDown;
} else {
/* otherwise, move the DIV from anywhere inside the DIV:*/
elmnt.onmousedown = dragMouseDown;
}
function dragMouseDown(e) {
e = e || window.event;
e.preventDefault();
// get the mouse cursor position at startup:
pos3 = e.clientX;
pos4 = e.clientY;
document.onmouseup = closeDragElement;
// call a function whenever the cursor moves:
document.onmousemove = elementDrag;
}
function elementDrag(e) {
e = e || window.event;
e.preventDefault();
// calculate the new cursor position:
pos1 = pos3 - e.clientX;
pos2 = pos4 - e.clientY;
pos3 = e.clientX;
pos4 = e.clientY;
// set the element's new position:
elmnt.style.top = (elmnt.offsetTop - pos2) + "px";
elmnt.style.left = (elmnt.offsetLeft - pos1) + "px";
}
function closeDragElement() {
/* stop moving when mouse button is released:*/
document.onmouseup = null;
document.onmousemove = null;
}
}
当您开始拖动到所选对象时，您需要添加类。 这将禁用锚标记的操作。在这里，我在当前示例中使用拖动启动。
停止拖动后，您需要删除该类。 下面是您的示例：
<html>
<head>
<title></title>
<script src="https://code.jquery.com/jquery-1.10.2.js"></script>
</head>
<body>
<header>
<div id="draggable"><div id="draggableimg"><a href="https://stackoverflow.com/questions/57839524/how-to-prevent-link-opening-while-div-is-dragged/57921413"><img src="Events.png"/></a></div></div>
<style>
#draggable {
position: absolute;
top: 100px;
left: 100px;
}
#draggableimg {border:solid 1px #999; display:inline-block;}
#draggableimg img {
width: 300px;
}
.dragstart a{pointer-events: none;}
</style>
<script>
//Make the DIV element draggable:
dragElement(document.getElementById("draggable"));
var _curDragEle = "";
function dragElement(elmnt) {
var pos1 = 0, pos2 = 0, pos3 = 0, pos4 = 0;
if (document.getElementById(elmnt.id + "img")) {
/* if present, the header is where you move the DIV from:*/
document.getElementById(elmnt.id + "img").onmousedown = dragMouseDown;
} else {
/* otherwise, move the DIV from anywhere inside the DIV:*/
elmnt.onmousedown = dragMouseDown;
}
function dragMouseDown(e) {
e = e || window.event;
e.preventDefault();
_curDragEle = this;
// get the mouse cursor position at startup:
pos3 = e.clientX;
pos4 = e.clientY;
document.onmouseup = closeDragElement;
// call a function whenever the cursor moves:
document.onmousemove = elementDrag;
}
function elementDrag(e) {
_curDragEle.classList.remove("dragstart")
_curDragEle.className = _curDragEle.className + " dragstart";
e = e || window.event;
e.preventDefault();
// calculate the new cursor position:
pos1 = pos3 - e.clientX;
pos2 = pos4 - e.clientY;
pos3 = e.clientX;
pos4 = e.clientY;
// set the element's new position:
elmnt.style.top = (elmnt.offsetTop - pos2) + "px";
elmnt.style.left = (elmnt.offsetLeft - pos1) + "px";
}
function closeDragElement() {
var k = document.querySelectorAll(".dragstart")
for(var i=0; i < k.length;i++){
k[0].classList.remove("dragstart")
}
/* stop moving when mouse button is released:*/
document.onmouseup = null;
document.onmousemove = null;
}
}
</script>
</body>
</html>
JSFiddle link
CSS：
#draggable.dragging * { pointer-events: none; }
.JS：
确保仅在鼠标移动时才将类.dragging添加到#draggable，然后，在鼠标向上时 - 删除类，但您可能需要使用setTimeout(removeDraggingClass, 1).
一个纯粹的JS替代方案是，在mousemove上，设置anchor.onclick="return false"(或anchor.href=""(，然后在mouseup，anchor.onclick=""(或anchor.href="events.html"(，同样，您可能需要mouseup处理才能对setTimeout进行。
我认为如果我这样做，最好的解决方案是：
const link = document.querySelector('#draggableimg > a')
let allowClick=true
link.onclick=()=>{ if(!allowClick) { allowClick=true; return false } }
然后，在片场mousemoveallowClick=false