捕获鼠标移动SVG

Question

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

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); 
} 

注： - 我have'nt测试，但它会工作。确保你设置属性'isdraggable'rect即<rect x=0 y=0 width=100 height=100 isdraggable='true' />