0

我编辑了标题。此外，如果我尝试再次拖动正在绘制的矩形以缩小它，它不会更新。我认为问题与矩形是与图像不同的元素（可能是孩子）有关.. 所以也许解决方案是为孩子们举办同样的活动？我试图做这样的事情，但仍然有问题。随意更改代码中的任何内容。

 <HTML>
<HEAD>
<META http-equiv=imagetoolbar content=no>
<TITLE>

</TITLE>
<STYLE>
#rubberBand {
position: absolute;
visibility: hidden;
width: 0px; height: 0px;
border: 2px solid red;
}
</STYLE>

</HEAD>
<BODY>
<img name="myImage" id="myImage" src="VK.jpg" height=400
width=400>


<DIV ID="rubberBand"></DIV>

<SCRIPT>

var IMG;

function startRubber (evt) {
if (document.all) {
// IE
var r = document.all.rubberBand;
r.style.width = 0;
r.style.height = 0;
r.style.pixelLeft = event.x;
r.style.pixelTop = event.y;
r.style.visibility = 'visible';
IMG.ondragstart = cancelDragDrop; // otherwise IE will try to drag the image
}
else if (document.getElementById) {
// firefox
evt.preventDefault();
var r = document.getElementById('rubberBand');
r.style.width = 0;
r.style.height = 0;
r.style.left = evt.clientX + 'px';
r.style.top = evt.clientY + 'px';
r.style.visibility = 'visible';
r.onmouseup = stopRubber;
}
IMG.onmousemove = moveRubber;
}
function moveRubber (evt) {
if (document.all) { // IE
var r = document.all.rubberBand;
r.style.width = event.x - r.style.pixelLeft;
r.style.height = event.y - r.style.pixelTop;
}
else if (document.getElementById) { // firefox
var r = document.getElementById('rubberBand');
r.style.width = evt.clientX - parseInt(r.style.left);
r.style.height = evt.clientY - parseInt(r.style.top);
}
return false; // otherwise IE won't fire mouseup :/
}
function stopRubber (evt) {
IMG.onmousemove = null;
}

function cancelDragDrop()
{
window.event.returnValue = false;
}

IMG = document.getElementById('myImage');
IMG.onmousedown = startRubber;
IMG.onmouseup = stopRubber;

</SCRIPT>
</BODY>
</HTML>
4

1 回答 1

0

好的 - 发生的事情是你的 div 阻止鼠标事件到达 img，所以你需要做的就是在 CSS 中为 div 禁用鼠标事件，你就完成了：

<STYLE>
#rubberBand {
    position: absolute;
    visibility: hidden;
    width: 0px; height: 0px;
    border: 2px solid red;
    pointer-events:none;
}
</STYLE>

参考：忽略覆盖图像上的鼠标交互

于 2013-07-23T20:09:41.687 回答