javascript - Cannot create custom toolbar button that works on mobile -

i have simple code:

 <button class="pswp__button" id="custombutton" style="background:none;" title="custom" onclick="customclicked()">     <img src="~/customimage.jpg"">  </button> 

this works expected on desktop browsers. when switch mobile though, cannot event fire when tap button. i've tried attaching every event handler can think of: tap, click, touch, touchstart, etc, , can still not of events fire on mobile.

if invoke click event through console, works on mobile well, can't seem click event propagate control. i've tried setting zindex ridiculous values, , still no luck. have clue?

after searching solutions online, seem have teh same problem. one, instance, doesn't fire on mobile either:

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 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 separate element, animating opacity faster rgba(). -->      <div class="pswp__bg"></div>        <!-- slides wrapper overflow:hidden. -->      <div class="pswp__scroll-wrap">            <!-- container holds slides. photoswipe keeps 3 slides in dom save memory. -->          <div class="pswp__container">              <!-- don't modify these 3 pswp__item elements, data 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 changed. -->          <div class="pswp__ui pswp__ui--hidden">                <div class="pswp__top-bar">                    <!--  controls self-explanatory. order can 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 class pswp__preloader--active when preloader 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>

in order achieve functionality, must edit hte photoswipe-ui-default.js file.

your custom button must have class 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""> 

inside photoswipe-ui-default.js file, you'll see list of controls:

var _uielements = [     {          name: 'caption',          option: 'captionel',         oninit: function(el) {               _captioncontainer = el;          }      },     {          name: 'mycustombutton',          option: 'customoptionname',          ontap:mycustombuttonfunction     }, 

you must add button name options:

 var options = {                         history: false,                         esckey: false,                         closeonscroll: false,                         pinchtoclose: false,                         closeonverticaldrag: false,                         customoptionname: true                     };