无法在被动事件侦听器 jQuery Mobile 中阻止默认值
Posted
技术标签:
【中文标题】无法在被动事件侦听器 jQuery Mobile 中阻止默认值【英文标题】：Unable to preventDefault inside passive event listener jQuery Mobile 【发布时间】：2019-09-08 01:45:09 【问题描述】：我使用 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');
);
【问题讨论】：
好吧，我很困惑如果它还没有发生，你将如何在第一个 sn-p 中阻止一个事件。 我已经添加到$(document).on('swiperight', function(e) 下
等等，你是说你把document.addEventListener调用放在底部的sn-p？
已编辑问题
是的，不要那样做。您正在另一个事件处理程序中创建一个事件处理程序。为什么你觉得你需要这样做？
【参考方案1】：
仅供参考：在我的情况下（使用 Owl Carousel）对我的修复是纯 css：
.owl-carousel
touch-action: manipulation;
【讨论】：
这对我有用，添加到滚动元素中。加载 jQueryMobile 并且我有一个带有“溢出：滚动”的元素时出现问题。【参考方案2】：无需添加另一个eventListener。可以使用 CSS 解决此错误。将touch-action: none;添加到您正在滑动的容器中。
这是一个使用外部 JQM 面板作为全局导航的 DEMO 菜单：
$(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>【讨论】：
以上是关于无法在被动事件侦听器 jQuery Mobile 中阻止默认值的主要内容，如果未能解决你的问题，请参考以下文章
用于 intlTelInput 的 jquery 无法添加事件侦听器
由于目标被视为被动，无法在被动事件侦听器中阻止默认值？为啥滚动时出现此错误？