Question

其实我想创建一个“标记”效果。但是，当我点击并拖动我的图像时，为什么会产生“闪烁”效果呢？我想在拖动图像时放大div

<html>           
<head>
<script>
window.onload = function(){
  var imgWrapper = document.getElementById("imgWrapper");
                    imgWrapper.onmousedown = function(event){
                         event.preventDefault();
                         var mouseY = event.layerY;
                         var mouseX = event.layerX;
                         var firstTagging = document.createElement("div");
                         firstTagging.style.position = "absolute";
                         firstTagging.style.top = (mouseY) + "px";
                         firstTagging.style.left = (mouseX) + "px";
                         firstTagging.style.border = "1px solid red";
                         imgWrapper.appendChild(firstTagging);

                         imgWrapper.onmousemove = function(event){
                             firstTagging.style.width = (event.layerX - mouseX) + "px";
                            firstTagging.style.height = (event.layerY - mouseY) + "px";


                         }

                    }
}
</script>
</head>
<body>
<div id="imgWrapper">
<img src="jlin.jpg">
</div>
</body>     
</html>

http://jsfiddle.net/jPkpR/

但如果我在图像上使用onmousemove，它工作正常，为什么？ http://jsfiddle.net/jPkpR/1/

Answer 1

问题在于计算#imgWrapper的大小。当onmouseover被触发时，＃imgWrapper子元素（firstTagging）的高度和宽度正在发生变化。这个强制浏览器：

重新计算#imgWrapper宽度和高度
解雇onmouseover事件

这可能会重复多次。

事件在图像上时效果很好，因为图像大小没有变化。

作为一种快速解决方案，您可以添加：

#imgWrapper {
   overflow: hidden; 
}

这将强制修复#imgWrapper大小。

为什么jm的onmousemove事件不起作用

1 个答案: