Невозможно предотвратить дефолт внутри прослушивателя пассивных событий jQuery Mobile - PullRequest
Новая
       29

Невозможно предотвратить дефолт внутри прослушивателя пассивных событий jQuery Mobile

0 голосов
/ 17 апреля 2019

Я использую jQuery Mobile v1.5.0, чтобы открыть меню на свайпе, все работает нормально, но эта ошибка всегда есть, я пытаюсь добавить пример addEventListener: 

// open menu on swipe to right
$(document).on('swiperight', function(e) {
    document.addEventListener("swiperight", e.preventDefault(), {passive: false} );
    e.preventDefault()
    $('.menu').addClass('active');
});

Но ошибка все еще есть

Unable to preventDefault inside passive event listener due to target being treated as passive.

Код: 

// open menu on swipe to right
$(document).on('swiperight', function(e) {
    e.preventDefault()
    $('.menu').addClass('active');
});

1 Ответ

0 голосов
/ 18 апреля 2019

Нет необходимости добавлять еще eventListener. Эта ошибка может быть решена с помощью CSS. Добавьте touch-action: none; к контейнеру, который вы проводите.

Вот DEMO , использующий внешнюю панель JQM в качестве глобальной навигации. меню: 

$(document)
  .on('swiperight', '#page-acura, #page-audi, #page-bmw', function(e) {
    $("#panel").panel("open");
  })
  .ready(function() {
    $("#panel").panel({theme: "a", display: "overlay"}).enhanceWithin();
  });
.ui-page,
.ui-panel,
.ui-panel-wrapper,
.ui-panel-dismiss {
  touch-action: none;
}

h1, h2, h3, h4, h5, h6, p {
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>JQM 1.5.0 RC1 Panel Menu</title>
    <meta name="HandheldFriendly" content="True">
    <meta name="MobileOptimized" content="320">
    <meta name="viewport" content="user-scalable=no, initial-scale=1.0001, maximum-scale=1.0001, width=device-width, minimal-ui shrink-to-fit=no">
    <meta http-equiv="cleartype" content="on">
    <link rel="stylesheet" href="https://code.jquery.com/mobile/1.5.0-rc1/jquery.mobile-1.5.0-rc1.min.css" />
    <script src="https://code.jquery.com/jquery-3.4.0.min.js"></script>
    <script src="https://code.jquery.com/mobile/1.5.0-rc1/jquery.mobile-1.5.0-rc1.min.js"></script>
  </head>
  <body>
    <div data-role="page" id="page-acura">
      <div class="ui-toolbar-header ui-body-a">
        <h2 class="ui-toolbar-title">Acura</h2>
      </div>
      <div role="main" class="ui-content">
        <p>Acura content goes here.</p>
      </div>
      <div class="ui-toolbar-footer ui-toolbar-footer-fixed ui-body-a">
        <h2 class="ui-toolbar-title">Footer</h2>
      </div>
    </div>
    <div data-role="page" id="page-audi">
      <div class="ui-toolbar-header ui-body-a">
        <h2 class="ui-toolbar-title">Audi</h2>
      </div>
      <div role="main" class="ui-content">
        <p>Audi content goes here.</p>
      </div>
      <div class="ui-toolbar-footer ui-toolbar-footer-fixed ui-body-a">
        <h2 class="ui-toolbar-title">Footer</h2>
      </div>
    </div>
    <div data-role="page" id="page-bmw">
      <div class="ui-toolbar-header ui-body-a">
        <h2 class="ui-toolbar-title">BMW</h2>
      </div>
      <div role="main" class="ui-content">
        <p>BMW content goes here.</p>
      </div>
      <div class="ui-toolbar-footer ui-toolbar-footer-fixed ui-body-a">
        <h2 class="ui-toolbar-title">Footer</h2>
      </div>
    </div>
    <div data-role="panel" id="panel">
      <ul data-role="listview" data-icon="false" data-inset="true">
        <li><a href="#page-acura">Acura</a></li>
        <li><a href="#page-audi">Audi</a></li>
        <li><a href="#page-bmw">BMW</a></li>
      </ul>
    </div>
  </body>
</html>
...