Question

我正在尝试创建一个小的可拖动SVG rect和HTML 5页面。我想做的是当我在rect元素上单击鼠标时捕获鼠标。不幸的是，似乎setCapture在SVG元素上不可用。是否有另一种方法可以获得HTML5中鼠标事件的独占访问权限？

Answer 1

您可以使用addeventlisteners。以下是使svg元素拖动的示例： - （我使用属性来确保它唯一的svg元素）

document.addEventListener('mousedown',mousedownfunction,false);

var Selectedelement=null;

function mousedownfunction(event){

  if(event.target.hasAttribute('isdraggable'){
     Selectedelement=event.target;
     document.addEventListener('mousemove',mousemovefunction,false);
     document.addEventListener('mouseup',mouseupfunction,false);    
   }

}

function mousemovefunction(event){
  // move your element here (logic of dragging)
}

function mouseupfunction(event){
document.removeEventListener('mousemove',mousemovefunction,false);
document.removeEventListener('mouseup',mouseupfunction,false);
}

注意： - 我没有测试过，但它会起作用。确保在rect <rect x=0 y=0 width=100 height=100 isdraggable='true' />

中设置属性'isdraggable'

捕获鼠标移动SVG

1 个答案: