Question

我有一个html文件，如：

＆＃13;

<!DOCTYPE html>
<html>
    <head>
        <title>Drag-Drop</title>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
		<script language="javascript" src="myJavascript.js"></script>
	</head>
    <body height="10000" width="10000" style="position: relative; left: 0px; top: 0px">
		<svg id="svgBackground" height="10000" width="10000" style="position: absolute; left: 0px; top: 0px">
		</svg>
		<svg id="svgTempArrows" height="10000" width="10000" style="position: absolute; left: 0px; top: 0px">
		</svg>
		<svg id="svgForwardArrows" height="10000" width="10000" style="position: absolute; left: 0px; top: 0px">
		</svg>
		<svg id="svgBackwardArrows" height="10000" width="10000" style="position: absolute; left: 0px; top: 0px">
		</svg>
		<svg id="svgArrowHeads" height="10000" width="10000" style="position: absolute; left: 0px; top: 0px">
		</svg>
    </body>
</html>

＆＃13;

在myJavascript.js中我有：

＆＃13;

window.onload = function background()
{
   ...
   var elements = Array.from(document.getElementsByTagNameNS(svgNS, 'svg'));
   elements.forEach(function(el){
		el.addEventListener("mousedown", startDraw);
		el.addEventListener("mousemove", draw);
		el.addEventListener("mouseup", endDraw);
   });
   
   function startDraw(ev)
   {
      ...
   }
   
     function draw(ev)
   {
      ...
   }
   
     function endDraw(ev)
   {
      ...
   }

＆＃13;

它已经有效，但它只适用于网页的一个区域（鼠标只能在网页的上部区域中发挥作用）。我不知道为什么会这样。你能帮助我吗？感谢

Answer 1

这里有问题吗？

document.getElementsByTagNameNS（svgNS，＆＃39; svg＆＃39;）

和你的位置一样

Answer 2

我对您的代码进行了一些更改，现在它对我工作正常我用了jquery

var elements = $('svg');

for(var i=0;i<elements.length;i++){
   elements[i].addEventListener("mousedown", startDraw);
   elements[i].addEventListener("mousemove", draw);
   elements[i].addEventListener("mouseup", endDraw);
 }

javascript：鼠标事件不适用于大区域

2 个答案: