SVG 요소의 이벤트 위임

Question

SVG 캔버스에 추가 할 모든 요소에 공통적 인 클릭 핸들러가 있습니다. 하지만 새로 생성 된 요소에 핸들러를 위임 할 수는 없습니다.

이

내가 위임 시도 코드,하지만 행운

$("#floor").on('click','.drawnLine', function() { 
    //#floor is the SVG Element 
    //.drawnLine is the <line> element that is added dynamically 
    console.log($(this).data('index')); 
}); 

업데이트 : 위임 :

참고 언급되는 .on()의 jQuery를 설명서에 이벤트가 SVG에서 작동하지 않습니다.

이제이 문제에 대한 다른 해결 방법이 있습니까?

Answer 1

jQuery가 SVG와 함께 실패하면 바닐라 js를 사용할 수 있습니다. 다행히도 svg를 지원하는 모든 브라우저는 이벤트 리스너를 지원합니다.

$("#floor")[0].addEventListener('click', function(e) { 
    // do nothing if the target does not have the class drawnLine 
    if (!e.target.classList.contains("drawnLine")) return; 
    console.log($(this).data('index')); 
}); 

그러나 당신은 또한 더 깨끗하게 이벤트를 위임 자신의 함수를 만들 수 있습니다 순수한 JS 위임 이벤트가 너무 추한 없습니다.

Answer 2

TL/DR : 비 SVG 상위 요소에 이벤트 수신기를 연결합니다.

jQuery 문서의 메모는 다소 오해 할 수 있습니다.

위임 된 이벤트는 SVG에서 작동하지 않습니다. 리스너가 SVG에 연결되어있는 경우

그것은 아마해야 ...

위임 된 이벤트는 를 작동하지 않습니다.

jQuery의 이벤트 위임은 이벤트 수신기가 SVG 요소에 연결될 때 작동하지 않습니다. 그러나 리스너를 SVG의 비 SVG 부모에 연결하면 이벤트 전파가 예상대로 작동하고 SVG 요소와 일치하는 선택기가 실제로 이벤트 처리기 기능을 트리거합니다.

$("#floor").on('click','.drawnLine', function() { 
    console.log($(this).data('index')); 
}); 

그러나 부모 요소에 부착이 작동합니다 :

$(document.body).on('click','#floor .drawnLine', function() { 
    console.log($(this).data('index')); 
}); 

참고 : 나는 하나의 특질했습니다 작업을하지 않습니다 SVG 요소에 수신기를 부착

이벤트 대상이 SVG 요소 인 경우 이벤트가 iOS의 document.body까지 계속 표시됩니다. 따라서 iOS 사용자가 핸들러 함수를 트리거 할 수있게하려면 이벤트 리스너를 중간에있는 일부 요소 (예 : div 요소의 SVG가있는 위치)에 연결해야합니다.