无法创建适用于移动设备的自定义工具栏按钮答案

【问题标题】：Cannot create custom toolbar button that works on mobile无法创建适用于移动设备的自定义工具栏按钮
【发布时间】：2015-05-11 20:43:57
【问题描述】：

我有简单的代码：

 <button class="pswp__button" id="CustomButton" style="background:none;" title="Custom" onclick="CustomClicked()">
    <img src="~/CustomImage.jpg"">
 </button>

这在桌面浏览器上按预期工作。但是，当我切换到移动设备时，点击按钮时无法触发事件。我已经尝试附加我能想到的每个事件处理程序：点击、单击、触摸、触摸启动等，但我仍然无法在移动设备上触发任何事件。

如果我通过控制台调用 click 事件，它也可以在移动设备上运行，但我似乎无法让 click 事件传播到该控件。我尝试将其 zindex 设置为荒谬的值，但仍然没有运气。有人知道吗？

在网上搜索了一些解决方案后，他们似乎都有同样的问题。例如，这个也不会在移动设备上触发：

var openPhotoSwipe = function() {
    var pswpElement = document.querySelectorAll('.pswp')[0];

    // build items array
    var items = [
        {
            src: 'https://farm2.staticflickr.com/1043/5186867718_06b2e9e551_b.jpg',
            w: 964,
            h: 1024
        },
        {
            src: 'https://farm7.staticflickr.com/6175/6176698785_7dee72237e_b.jpg',
            w: 1024,
            h: 683
        }
    ];
    
    // define options (if needed)
    var options = {
			 // history & focus options are disabled on CodePen        
      	history: false,
      	focus: false,

        showAnimationDuration: 0,
        hideAnimationDuration: 0
        
    };
    
    var gallery = new PhotoSwipe( pswpElement, PhotoSwipeUI_Default, items, options);
    gallery.init();
};

openPhotoSwipe();

$(document).on('click', '.pswp__button.pswp__button--close' , function(){
  alert('d'); // did not fire?
});

document.getElementById('btn').onclick = openPhotoSwipe;

<button id="btn">Open PhotoSwipe</button>

<!-- Root element of PhotoSwipe. Must have class pswp. -->
<div class="pswp" tabindex="-1" role="dialog" aria-hidden="true">

    <!-- Background of PhotoSwipe. 
         It's a separate element, as animating opacity is faster than rgba(). -->
    <div class="pswp__bg"></div>

    <!-- Slides wrapper with overflow:hidden. -->
    <div class="pswp__scroll-wrap">

        <!-- Container that holds slides. PhotoSwipe keeps only 3 slides in DOM to save memory. -->
        <div class="pswp__container">
            <!-- don't modify these 3 pswp__item elements, data is added later on -->
            <div class="pswp__item"></div>
            <div class="pswp__item"></div>
            <div class="pswp__item"></div>
        </div>

        <!-- Default (PhotoSwipeUI_Default) interface on top of sliding area. Can be changed. -->
        <div class="pswp__ui pswp__ui--hidden">

            <div class="pswp__top-bar">

                <!--  Controls are self-explanatory. Order can be changed. -->

                <div class="pswp__counter"></div>

                <button class="pswp__button pswp__button--close" title="Close (Esc)"></button>

                <button class="pswp__button pswp__button--share" title="Share"></button>

                <button class="pswp__button pswp__button--fs" title="Toggle fullscreen"></button>

                <button class="pswp__button pswp__button--zoom" title="Zoom in/out"></button>

                <!-- Preloader demo http://codepen.io/dimsemenov/pen/yyBWoR -->
                <!-- element will get class pswp__preloader--active when preloader is running -->
                <div class="pswp__preloader">
                    <div class="pswp__preloader__icn">
                      <div class="pswp__preloader__cut">
                        <div class="pswp__preloader__donut"></div>
                      </div>
                    </div>
                </div>
            </div>

            <div class="pswp__share-modal pswp__share-modal--hidden pswp__single-tap">
                <div class="pswp__share-tooltip"></div> 
            </div>

            <button class="pswp__button pswp__button--arrow--left" title="Previous (arrow left)">
            </button>

            <button class="pswp__button pswp__button--arrow--right" title="Next (arrow right)">
            </button>

            <div class="pswp__caption">
                <div class="pswp__caption__center"></div>
            </div>

          </div>

        </div>

</div>

【问题讨论】：

标签： javascript jquery jquery-mobile mobile photoswipe

【解决方案1】：

为了实现此功能，您必须编辑 hte photoswipe-ui-default.js 文件。

您的自定义按钮必须具有类 pswp__button--myCustomButtonName 以及 pswp__button。

<button class="pswp__button pswp__button--myCustomButtonName" id="CustomButton" style="background:none;" title="Custom" onclick="CustomClicked()">
<img src="~/CustomImage.jpg"">

在 photoswipe-ui-default.js 文件中，您会看到一个控件列表：

var _uiElements = [
    { 
        name: 'caption', 
        option: 'captionEl',
        onInit: function(el) {  
            _captionContainer = el; 
        } 
    },
    { 
        name: 'myCustomButton', 
        option: 'customOptionName',

        onTap:MyCustomButtonFunction
    },

然后您必须将该按钮名称添加到选项中：

 var options = {
                        history: false,
                        escKey: false,
                        closeOnScroll: false,
                        pinchToClose: false,
                        closeOnVerticalDrag: false,
                        customOptionName: true
                    };

【讨论】：

有没有办法在不改变 ui 元素文件的情况下做到这一点？我不能为我的项目搞乱那个文件。
为什么不开源！唯一的另一种方法是用 jquery 注入元素，但处理按钮栏点击的函数是一个大的 switch 语句，所以你必须点击你的元素而不是按钮栏。老实说，我认为修改他们的代码更容易。
肯定会更容易，是的。我无法更改该文件，因为其他人可能会通过 bower 安装它，然后他们将不会拥有更改后的文件。所以我需要另一个解决方案。

【解决方案2】：

使用:before为按钮应用额外的样式，或者修改默认的UI JS文件，使其也注册点击图像。

默认情况下，它仅在目标元素（在您的情况下为图像）上注册点击，并且不会在 DOM 树中向上传播。

【讨论】：

【解决方案3】：

想出了一种不涉及更改库的方法。编写单击处理的方式有点不幸，因为您不能使用 preventDefault 或 stopPropagation 来取消处理程序。

// Disable hiding controls when tapping action buttons
pswp.framework.bind(pswp.scrollWrap, 'pswpTap', (e) => {
  let el = e.target || e.srcElement;
  while ((el = el.parentElement) && !el.classList.contains('action'));
  if (el) {
    pswp.options.tapToToggleControls = false;
    setTimeout(() => {
      pswp.options.tapToToggleControls = true;
    }, 50);
  }
});

【讨论】：