jQuery click/touch 事件不会在移动设备（内联元素）中触发

Question

我有一个 span 元素，当 clicked/touched 应该触发 jQuery 中的某些动作。

HTML

<span id="" class="dwr_icon_location locationElementBtn"></span>

jQuery

$(document).ready(function(){
  // Location Button
  $(document).on("click touchstart",".locationElementBtn", function(){
      $(".locationBtn").toggleClass("active");

      // Displaying location window in the proper bar
      var locationBtn   = $(this).parent(".locationBtn");
      var locationStngs = $("#locationStngs");

      // if locationStngs doesn't exist in the current bar
      if(!locationBtn.children("#locationStngs").length){
        locationBtn.append(locationStngs);
      }
  });
});

问题是该事件永远不会在移动设备中触发，尽管附加了 jQuery 侦听器的其他元素工作得很好。控制台上也没有错误显示。顺便说一下，一切似乎都可以在桌面上运行。

我知道这个问题已经被反复问过，但在这种情况下我似乎没有找到解决方案。对如何解决此问题的任何见解表示赞赏。

Answer 1

我可以通过添加

来解决问题

display:inline-block

到.locationElementBtn。对于移动设备上的 inline（跨度）元素，link 命中空间似乎并不那么明显，因此不会触发 jQuery 事件。应该是跟含有字体图标的元素有关。

感谢t.niese的提示！

jQuery click/touch 事件不会在移动设备（内联元素）中触发

jQuery click/touch events won't fire in mobile (inline element)

html

javascript

mobile

jquery

google-chrome-devtools