2012-07-23 1 views
1

내가이 자바 스크립트 파일이 기본적으로jQuery SVG는 폴리 라인, 파이어 폭스 버그를 만들까요?

var lines=0; 

$(document).ready(function() {   
    $("#paper2").svg({ 
     onLoad: function() { 
      svg2 = $("#paper2").svg('get'); 
      root2= svg2.root(); 

      $("#paper2").mousedown(function(ev) { 
       lines++; 
       var polyline = svg2.polyline([[ev.pageX-1-this.offsetLeft , ev.pageY-this.offsetTop-1], [ev.pageX+1-this.offsetLeft , ev.pageY-this.offsetTop+1]], 
        {fill: 'none', stroke: 'black', strokeWidth: 3, 
        id: 'polyline'+lines}) 

       $("#paper2").mousemove(function(ev) { 
        var polyline= $('#polyline' + lines); 
        polyline.attr("points", polyline.attr("points")+ ' ' + (ev.pageX-this.offsetLeft)+','+(ev.pageY-this.offsetTop)); 
       }); 

       $("#paper2").mouseup(function(ev) { 
        var div= $("#paper2"); 
        div.unbind('mousemove'); 
        div.unbind('mouseup'); 
       }) 
      });    
     }, 
     settings: {} 
    }); 

}); 

내가 사업부의 상단에 마우스 키를 누른 때 허용, 마우스를 다음과 폴리 라인을 그리기 시작 ($는 ("#의 paper2")는 사업부이다) 몇 가지 기본 그림. 그것은 오페라와 크롬에서 잘 작동하지만 파이어 폭스에서 두 번째 시간 (마우스를 놓은 다음 다시 누르십시오)에서 그림을 드래그하는 것처럼 작동하는 첫 번째 폴리 라인에서 작동합니다 (모든 SVG 물건 내 div 내 안에 내 마우스) 및 마우스 - 업 이벤트가 호출되지 않습니다. 그래서 한번 mousebutton을 놓으면 두 번째로 polyline을 정상적으로 그리기 시작하지만 클릭은 내려지지 않습니다. 다시 클릭하면 마우스 업 이벤트가 시작되고 다시 정상적으로 작동하기 시작합니다. 이것은 두 번째 줄을 그릴 때만 발생합니다. 첫 번째 줄, 세 번째 줄 및 다른 모든 줄은 이후에 정상적으로 작동합니다.

누군가 내가 잘못된 일을하고 있는지, 아니면 실제로 파이어 폭스 버그인지 알면 누구나 해결 방법을 알고있을 것입니다.

답변

1

뭔가 잘못하고 있습니다. 각 이벤트 핸들러에서 ev.preventDefault()를 호출해야합니다.

+0

그건 속임수 였고, 많은 감사합니다! – Hoffmann