Question

给出以下代码：

function move()
{
    dom = document.getElementById('image');
    dom.style.top=event.clientY+"px";
    dom.style.left=event.clientX+"px";
}

<!DOCTYPE html>
	<html>
	<head>
		<title>Program 3</title>
		<script type="text/javascript" src="pr3.js"></script>
	</head>
	<body onmousedown="move();">
		<img src="image.jpg" id="image" width="300px" height="200px" style="position:absolute; left:100px; top:100px;"/>
	</body>
	</html>

修改

图像仅在单击图像时移动。但是当在图像外部单击时，它不会移动。

但是，如果没有<!DOCTYPE html>，它会在浏览器窗口内的任何位置移动，而不会在图像上显式移动。

Answer 1

问题在于＆＃34; quirks模式＆＃34;身高设置为100％，而在标准模式下＃34;它取决于其内容。因此，如果没有doctype（在怪癖模式下渲染），整个页面区域就是正文 - 所以它是可点击的，但在＆＃34;标准模式下＃34;它只是图像...

如果你想要你也可以在＃34;标准模式＆＃34;中执行此操作，通过应用以下css：

html, body {
  height: 100%;
}

工作示例： http://plnkr.co/edit/wrHS3b8nQ9tfi5AMWqoE?p=preview

Answer 2

绝对定位的元素不会影响其包含元素的大小。考虑我们使用红色<div>而不是<body>作为可点击元素的情况：

function move() {
    dom = document.getElementById('image');
    dom.style.top=event.clientY+"px";
    dom.style.left=event.clientX+"px";
}

div { background-color: red; }

<!DOCTYPE html>
<html><body>
    <div onmousedown="move();">
      <img src="image.jpg" id="image" width="300px" height="200px" style="position:absolute; left:100px; top:100px;"/>
    </div>
</body></html>

此代码段应包含红色<div>，但它不包含，因为<div>为空或任何会导致其大小大于0的内容。它包含的图像绝对定位，不影响尺寸。

现在考虑使用CSS指定大小的类似<div>：

function move() {
    dom = document.getElementById('image');
    dom.style.top=event.clientY+"px";
    dom.style.left=event.clientX+"px";
}

div {
      background-color: red;
      width: 400px;
      height: 400px;
  }

<!DOCTYPE html>
<html><body>
    <div onmousedown="move();">
      <img src="image.jpg" id="image" width="300px" height="200px" style="position:absolute; left:100px; top:100px;"/>
    </div>
</body></html>

现在div大于零，单击inside会产生预期结果。

这就是为什么<body>点击不起作用的原因：<body>的宽度和高度为0.如果您将onclick听众放在<html>上element（默认为全宽和全高）或者具有非零维度的元素，您将看到您的代码有效。我不确定我是否建议在<html>元素上放置绑定点击监听器;我建议使用CSS大小的<div>。

javascript函数在使用时不起作用

2 个答案: