0

実際には、「タグ付け」効果を作成したいと考えています。しかし、画像をクリックしてドラッグすると、「点滅」効果が発生するのはなぜですか?画像をドラッグするときに 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/

4

1 に答える 1

0

問題は、#imgWrapper のサイズの計算にあります。が発火するonmouseoverと #imgWrapper 子要素 ( firstTagging) の高さと幅が変化します。これにより、ブラウザに次のことが強制されます。

  • #imgWrapper の幅と高さを再計算する
  • onmouseover イベントを発生させる

これは複数回繰り返される場合があります。

画像サイズが変わらないため、イベントが画像上にある間はうまく機能しています。

迅速な解決策として、次を追加できます。

#imgWrapper {
   overflow: hidden; 
}

これにより、#imgWrapper のサイズが強制的に固定されます。

于 2013-09-14T06:20:37.540 に答える