openseadragon click 이벤트 nextButton previousButton

Question

click 이벤트 리스너를 nextButton 및 previousButton에 추가하고 현재 이미지를 얻고 싶습니다 (viewer.source.getTileUrl()을 통해 수행).

그러나 나는 TypeError: viewer.source is null을 받고 있습니다. 하지만 작동합니까 getUrlBtn.addEventListener("click"[...]

버튼의 addHandler 클릭 이벤트에 어떤 문제가 있습니까?

var viewer = OpenSeadragon({ 
 
    crossOriginPolicy: 'Anonymous', 
 
    visibilityRatio: 1.0, 
 
    showRotationControl: true, 
 
    defaultZoomLevel: 1.0, 
 
    minZoomImageRatio: 0.4, 
 
    id: "osd-container", 
 
    tileSources: ["images/T/1.dzi", "images/T/2.dzi", "images/T/3.dzi", "images/T/4.dzi"], 
 
    sequenceMode: true, 
 
    showReferenceStrip: false, 
 
}); 
 

 
//works 
 
var getUrlBtn = document.getElementById("getUrl"); 
 
getUrlBtn.addEventListener("click",function(e){ 
 
    console.log("getUrl: " + viewer.source.getTileUrl()); 
 
    currentFol.innerHTML = viewer.source.getTileUrl(); 
 
}); 
 

 
//TypeError: viewer.source is null 
 
viewer.nextButton.addHandler("click",function(e){ 
 
    console.log("nextButton"); 
 
    currentFol.innerHTML = viewer.source.getTileUrl(); 
 
}); 
 
//TypeError: viewer.source is null 
 
viewer.previousButton.addHandler("click",function(e){ 
 
    console.log("previousButton"); 
 
    currentFol.innerHTML = viewer.source.getTileUrl(); 
 
}) 
 

 
//I also tried but same error as above 
 
viewer.nextButton.tracker.clickHandler = updateFol; 
 
viewer.previousButton.tracker.clickHandler = updateFol; 
 

 
var currentFol = document.getElementById("currentFol"); 
 
function updateFol(){ 
 
    console.log("next/previousButton"); 
 
    currentFol.innerHTML = viewer.source.getTileUrl(); 
 
}

<button id="getUrl">get current url</button> 
 

 
<p><span id="currentFol"></span></p>

Answer 1

아마도 가장 좋은 방법은 바로 "페이지"이벤트를 수신하는 것입니다

viewer.addHandler('page', updateFol); 

가 그 일을합니까?