PhotoSwipe:如何将函数绑定到图像点击事件

我确实用幻灯片放映功能扩展了PhotoSwipe，请参阅此示例。如果单击右上角的"播放"按钮，则幻灯片放映开始，然后单击右上角落的暂停按钮停止幻灯片放映。这在PC上运行良好。

它也适用于我的iPad，但单击"暂停"按钮会产生副作用：图像会被放大。我不知道这是什么原因。知道吗？

Start/Stop函数是在函数playpause（）中执行的。为了消除这种副作用，我喜欢使用图像上的单次点击事件来执行我的playpause（）函数。

所以我的问题是：如何将我的playpause（）函数绑定到图像上的点击/点击事件？

这是我使用的代码：

/** HTML **/
<div class="pswp__top-bar">
    <div class="pswp__counter"></div>
    <!-- Play/Pause button -->
    <a href="javascript:playpause()" id="link--play"><img src="res/play.png"  width="30" height="30" id="$playpause" alt="Speel/Stop (spatie balk)" title="Speel/Stop (spatie balk)"></a>
    <button class="pswp__button pswp__button--close" title="Close (Esc)"></button>
/** JS **/ 
function slideShowTimer() {
    if ((stopAfterLastSlide)&&((slide_index == items.length-1))) { 
        document.images['$playpause'].src = play_img.src;
        clearTimeout(slideShowTimerID);
        playing= !playing;
        pswp.close();
    }
    else {  
        slideShowTimerID = setTimeout("slideShowTimer()",viewtime); 
        pswp.next();
    }
};
function playpause() {                      
      playing= !playing;
      if (!playing) {
         document.images['$playpause'].src = play_img.src;
         clearTimeout(slideShowTimerID);
      } else {
         document.images['$playpause'].src = pause_img.src;  
         slideShowTimer();  
     } 
};
    pswp = new PhotoSwipe( pswpElement, PhotoSwipeUI_Default, items, options);
    pswp.listen('destroy', function() { 
    if (playing) {
          playing = false;
          document.images['$playpause'].src = play_img.src;
          clearTimeout(slideShowTimerID);       
        }    
    });
    pswp.init();
/** CSS **/ 
#link--play  {
    position: absolute;
    right: 132px;
    padding: 6px;
    z-index: 9999;
}