openseadragon 添加点击事件 nextButton previousButton

Question

我想向 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

最好的方法可能是只听 "page" 事件：

viewer.addHandler('page', updateFol);

这样行吗？

openseadragon 添加点击事件 nextButton previousButton

openseadragon add click event nextButton previousButton

javascript

event-handling

openseadragon