Question

我已设置了几个事件触发器，以便在用户点击其外部时关闭特定元素。这适用于非移动设备，但在移动设备或平板电脑上，它们不会被激活。我假设这是因为点按事件的触发次数与点击次数不同。关于如何处理这个问题的任何建议，以便功能将涵盖这两个方面？

// Listen for unique event targets
      $(document).on( 'click', function(event) {
        if (!$(event.target).closest( '.modal .content' ).length) {
          $( '.modal' ).fadeOut(200);
        }
        if (!$(event.target).closest( '.language-selector ul' ).length) {
          if ( $( '.language-selector' ).is( ':visible') ) {
            $( '.language-selector >' ).removeClass('active');
          }
        }
        if (!$(event.target).closest( '.searchbox' ).length) {
          if ( $( '.searchfield' ).is( ':visible') ) {
            $( '.searchfield' ).removeClass('active').parents( '.searchbox' ).find( 'input[type="submit"]' ).removeClass( 'active' );
          }
        }
      });

Answer 1

是的，点击并点按是不同的事件。

您可以使用 JQuery 选择器语法(click tap)来绑定它们：

// Listen for unique event targets
      $(document).on( 'click tap', function(event) {
        if (!$(event.target).closest( '.modal .content' ).length) {
          $( '.modal' ).fadeOut(200);
        }

Answer 2

尝试将“click”绑定到“touchstart”：

$(document).on( 'click touchstart', function(event) {
      if (!$(event.target).closest( '.modal .content' ).length) {
      $( '.modal' ).fadeOut(200);
}

要优化...如果您没有使用jQuery Mobile（或其他一些定义“tap”的插件/扩展程序），那么您将无法访问“tap”事件。

有许多解决方案可以捕获不是jquery mobile的tap事件，如果你只需要访问“tap”就不会那么大。

有关“touchstart”和其他原生js触摸事件的更多信息here

外部元素的事件触发器不会被点击

2 个答案: