由于目标被视为被动，因此无法防止被动事件侦听器内的Default?为什么滚动时出现此错误? [英] Unable to preventDefault inside passive event listener due to target being treated as passive? Why this error upon scrolling?
本文介绍了由于目标被视为被动，因此无法防止被动事件侦听器内的Default?为什么滚动时出现此错误?的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我正在使用chrome最新版本.我的应用程序抛出错误:
I am using chrome latest version. My application throws error:
Unable to preventDefault inside passive event listener due to target being treated as passive. See https://www.chromestatus.com/features/6662647093133312
这会妨碍其正确滚动(即生涩滚动)的能力.我在互联网上尝试了许多解决方案，但无法解决.
It hinders it ability to properly scroll i.e. jerky scroll. I tried many solutions on the internet but it couldn't solve it.
请帮助我.我正在使用css3，bootstrap和html.我尝试添加被动属性等，但似乎没有任何作用.
Please help me on this. I am using css3, bootstrap and html. I tried to add passive attribute etc but seems like nothing is working.
我的代码:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Google Tag Manager -->
<script>
(function (w, d, s, l, i) {
w[l] = w[l] || []; w[l].push({
'gtm.start':
new Date().getTime(), event: 'gtm.js'
}); var f = d.getElementsByTagName(s)[0],
j = d.createElement(s), dl = l != 'dataLayer' ? '&l=' + l : ''; j.async = true; j.src =
'https://www.googletagmanager.com/gtm.js?id=' + i + dl; f.parentNode.insertBefore(j, f);
})(window, document, 'script', 'dataLayer', 'GTM-W9FNBLV');</script>
<!-- End Google Tag Manager -->
<!-- -->
<!-- Document Title-->
<!-- =============================================-->
<!--<title>Velosi | Asset Integrity Ltd.</title>-->
<title>@ViewBag.Title</title>
@RenderSection("head", false)
<!-- -->
<!-- JavaScripts-->
<!-- =============================================-->
<script src="~/Scripts/modernizr-2.8.3.js"></script>
@*<script src="~/Scripts/modernizr-2.8.3.js"></script>*@
<link href="~/Content/Theme/lib/bootstrap/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="~/Scripts/jquery-3.3.1.min.js"></script>
<script src="~/Scripts/popper.min.js"></script>
<link href="https://fonts.googleapis.com/css?family=Montserrat:300,400,500,600,700|Open+Sans:300,400,600,700,800" rel="stylesheet" />
<link href="~/Content/Theme/lib/iconsmind/iconsmind.css" rel="stylesheet">
<link href="~/Content/External/css/ionicons.min.css" rel="stylesheet" />
<script src="~/Scripts/bootstrap.min.js"></script>
<script src="~/Content/Theme/lib/imagesloaded/imagesloaded.pkgd.min.js"></script>
<script src="~/Content/Theme/lib/gsap/src/minified/TweenMax.min.js"></script>
<script src="~/Content/Theme/lib/gsap/src/minified/plugins/ScrollToPlugin.min.js"></script>
<script src="~/Content/Theme/lib/CustomEase.min.js"></script>
<script src="~/Content/Theme/js/config.js"></script>
<script src="~/Content/Theme/js/zanimation.js"></script>
<script src="~/Content/Theme/lib/owl.carousel/dist/owl.carousel.min.js"></script>
<script src="~/Content/Theme/lib/remodal/dist/remodal.js"></script>
<script src="~/Content/Theme/lib/lightbox2/dist/js/lightbox.js"></script>
<script src="~/Content/Theme/lib/flexslider/jquery.flexslider-min.js"></script>
<script src="~/Content/Theme/js/core.js"></script>
<script src="~/Content/Theme/js/main.js"></script>
<script src="~/Content/External/js/jquery.slidereveal.min.js"></script>
<!-- DataTable -->
<script src="~/Content/Theme/DataTables-1.10.18/js/jquery.dataTables.min.js"></script>
<script src="~/Content/Theme/DataTables-1.10.18/js/dataTables.bootstrap.min.js"></script>
<script src="~/Content/Theme/FixedHeader-3.1.4/js/dataTables.fixedHeader.min.js"></script>
<script src="~/Content/Theme/Responsive-2.2.2/js/dataTables.responsive.min.js"></script>
<script src="~/Content/Theme/Responsive-2.2.2/js/responsive.bootstrap.min.js"></script>
<!-- Datepicker -->
<script src="~/Content/Theme/select2/dist/js/select2.min.js"></script>
<script src="~/Content/Theme/Toaster/toastr.js"></script>
@RenderSection("scripts", required: false)
<!-- Favicons-->
<!-- =============================================-->
<link rel="apple-touch-icon" sizes="180x180" href="~/Content/Theme/images/favicons/apple-touch-icon.png">
<link rel="icon" type="image/png" sizes="32x32" href="~/Content/Theme/images/favicons/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="~/Content/Theme/images/favicons/favicon-16x16.png">
<link rel="shortcut icon" type="image/x-icon" href="~/Content/Theme/images/favicons/favicon.ico">
@*<link rel="manifest" href="~/Content/Theme/images/favicons/manifest.json">*@
<link rel="mask-icon" href="~/Content/Theme/images/favicons/safari-pinned-tab.svg" color="#5bbad5">
<meta name="msapplication-TileImage" content="~/Content/Theme/images/favicons/mstile-150x150.png">
<meta name="theme-color" content="#ffffff">
<!-- -->
<!-- Stylesheets-->
<!-- =============================================-->
<!-- Default stylesheets-->
<!-- Template specific stylesheets-->
<link href="~/Content/Theme/lib/loaders.css/loaders.min.css" rel="stylesheet" />
<link href="https://fonts.googleapis.com/css?family=Montserrat:300,400,500,600,700|Open+Sans:300,400,600,700,800" rel="stylesheet">
<link href="~/Content/Theme/lib/iconsmind/iconsmind.css" rel="stylesheet">
<link href="~/Content/External/css/ionicons.min.css" rel="stylesheet" />
<link href="~/Content/Theme/lib/hamburgers/dist/hamburgers.min.css" rel="stylesheet">
<link href="~/Content/Theme/lib/font-awesome/css/font-awesome.min.css" rel="stylesheet">
<link href="~/Content/Theme/lib/owl.carousel/dist/assets/owl.carousel.min.css" rel="stylesheet">
<link href="~/Content/Theme/lib/owl.carousel/dist/assets/owl.theme.default.min.css" rel="stylesheet">
<link href="~/Content/Theme/lib/remodal/dist/remodal.css" rel="stylesheet">
<link href="~/Content/Theme/lib/remodal/dist/remodal-default-theme.css" rel="stylesheet">
<link href="~/Content/Theme/lib/flexslider/flexslider.css" rel="stylesheet">
<link href="~/Content/Theme/lib/lightbox2/dist/css/lightbox.css" rel="stylesheet">
<link href="~/Content/Theme/Toaster/toastr.css" rel="stylesheet" />
<!-- Main stylesheet and color file-->
<link href="~/Content/Theme/css/style.css" rel="stylesheet">
<link href="~/Content/Theme/css/custom.css" rel="stylesheet">
<!-- DataTable -->
<link href="~/Content/Theme/DataTables-1.10.18/css/dataTables.bootstrap.min.css" rel="stylesheet" />
<link href="~/Content/Theme/FixedHeader-3.1.4/css/fixedHeader.bootstrap.min.css" rel="stylesheet" />
<link href="~/Content/Theme/Responsive-2.2.2/css/responsive.bootstrap.min.css" rel="stylesheet" />
<!-- Datepicker -->
<link href="~/Content/Theme/select2/dist/css/select2.min.css" rel="stylesheet" />
<link href="~/Content/Site.css" rel="stylesheet" />
</head>
<body data-spy="scroll" data-target=".inner-link" data-offset="60">
<!-- Google Tag Manager (noscript) -->
<noscript>
<iframe src="https://www.googletagmanager.com/ns.html?id=GTM-W9FNBLV"
height="0" width="0" style="display:none;visibility:hidden"></iframe>
</noscript>
<!-- End Google Tag Manager (noscript) -->
<main>
<div class="loading" id="preloader">
<div class="loader h-100 d-flex align-items-center justify-content-center">
<div class="line-scale">
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
</div>
</div>
</div>
@Html.Partial("_Header")
@*<button class="btn btn-md btn-round btnEmailUs RequestCallBackIcon" id="trigger"><i class="fa fa-phone fa-lg"></i></button>*@
<div style="display: flex; justify-content: flex-end;" class="m-2">
<button class="right btn btn-md btn-round btnEmailUs1 RequestCallBackIcon" id="trigger"><i class="fa fa-phone fa-lg"></i></button>
</div>
<div id='slider' class="card text-white bg-dark EnquiryLowerBody" style="max-width: 20rem; display:none;">
<div class="card-header header-callback">Request Callback</div>
@using (Html.BeginForm("EnquiryForm", "Home", null, FormMethod.Post, new { @class = "mt-3" }))
{
<div class="card-body CardBody">
<div class="form-group">
<div class="col-md-12">
<input type="text" id="name" name="name" oninput="this.value = this.value.replace(/[0-9]/, '');" class="form-control" placeholder="Your name" required>
</div>
</div>
<div class="form-group">
<div class="col-md-12">
<input type="text" oninput="this.value = this.value.replace(/[^0-9]/g, '');" id=" mobileno" name="mobileno" class="form-control" placeholder="00971 XX XXXXXXX" required>
</div>
</div>
<div class="form-group">
<div class="col-md-12">
<input type="email" id="email" name="email" class="form-control" placeholder="name@domain.com" required>
</div>
</div>
<div class="form-group">
<div class="col-md-12">
<select class="d-flex flex-wrap" name="MainServiceName" id="MainServices">
<option selected value="m-None">-Select-</option>
<option value="m-SS">Software Services</option>
<option value="m-AIMS">Asset Integrity Management Services</option>
<option value="m-HSE">HSE & Environmental Services</option>
<option value="m-ES">Engineering Services</option>
<option value="Other">Other</option>
</select>
</div>
</div>
<div id="divSubServices" class="form-group">
<div class="col-md-12">
<select class="d-flex flex-wrap" name="SubServiceName" id="SubServices">
<option class="" selected value="s-None">-Select-</option>
<option class="SoftwareServices" value="s-AIMS">VAIL-Plant (Asset Integrity Management System)</option>
<option class="SoftwareServices" value="s-PHA">VAIL-PHA (Process Hazard Analysis)</option>
<option class="SoftwareServices" value="s-PSRA">VAIL-PSRA (Petrol Station Risk Assessment)</option>
<option class="SoftwareServices" value="s-MTS">VAIL-MTS (Material Tracking System)</option>
<option class="AIMS" value="s-RBI">Risk Based Inspection (RBI)</option>
<option class="AIMS" value="s-RCM">Reliability Centered Maintenance(RCM)</option>
<option class="AIMS" value="s-SIL">Safety Integrity Level (SIL)</option>
<option class="AIMS" value="s-PIMS">Pipeline Inspection Management System (Onshore & Offshore)</option>
<option class="HSE" value="s-HSECES">Health, Safety & Environmental Critical Equipment Systems (HSECES)</option>
<option class="HSE" value="s-AM">Risk Assessment & Management</option>
<option class="HSE" value="s-OH">Occupational Health</option>
<option class="HSE" value="s-EMP">Emergency Management & Planning</option>
<option class="HSE" value="s-HS">HSEIA Studies</option>
<option class="HSE" value="s-ES">Environmental Services</option>
<option class="EngineeringServices" value="s-FFS">Fitness for Services(FFS)</option>
<option class="EngineeringServices" value="s-CDFDECS">Conceptual Design, FEED, Detailed Design and Engineering Consultancy Services</option>
<option class="EngineeringServices" value="s-OMP">Operating Manuals & Procedures</option>
<option class="EngineeringServices" value="s-DVA">Design Verification & Appraisal</option>
<option class="EngineeringServices" value="s-ABDS">As-Built Drafting Services</option>
<option value="Other">Other</option>
</select>
</div>
</div>
<div id="divDescription" class="form-group">
<div class="col-md-12">
<input type="text" id="Description" name="Description" class="form-control" placeholder="Description">
</div>
</div>
<div id="divDescription" class="form-group">
<div class="col-md-12">
<button id="btnSubmit" class="btn btn-primary BtnSubmitEnquiry">Submit</button>
</div>
</div>
</div>
}
</div>
@RenderBody()
<div id="cookieConsent">
<div id="closeCookieConsent">x</div>
We use tools, such as cookies, to enable essential services and functionality on our site and to collect data on how visitors interact with our site, products and services. <a class="cookieConsentOK">Got it</a>
</div>
@Html.Partial("_Footer")
</main>
<!-- -->
</body>
</html>
<script type="text/javascript">
$(document).ready(function () {
$("#divDescription").hide();
$("#divSubServices").hide();
if (!sessionStorage.getItem("firstVisit")) {
sessionStorage.setItem("firstVisit", true);
setTimeout(function () {
$("#cookieConsent").fadeIn(200);
}, 4000);
$("#closeCookieConsent, .cookieConsentOK").click(function () {
$("#cookieConsent").fadeOut(200);
});
}
//setTimeout(function () {
// $("#cookieConsent").fadeIn(200);
//}, 4000);
//$("#closeCookieConsent, .cookieConsentOK").click(function () {
// $("#cookieConsent").fadeOut(200);
//});
});
$("#trigger").click(
function()
{
$("#slider").show();
}
);
$("#slider").slideReveal({
trigger: $("#trigger"),
position: "right",
push: false,
overlay: true
});
$("#MainServices").change(function () {
var OptionSelected = $(this).find("option:selected");
var ValueSelected = OptionSelected.val();
if (ValueSelected == "Other") {
$("#SubServices").val("s-None");
$('#divSubServices').hide();
$('#divDescription').show();
}
else {
$('#divSubServices').show();
$('#divDescription').hide();
}
//Software Services
if (ValueSelected == "m-None") {
$("#SubServices").val("s-None");
$('#divSubServices').hide();
return;
}
if (ValueSelected == "s-None") {
$('#divDescription').hide();
return;
}
if (ValueSelected == "m-SS") {
$("#SubServices").show();
var drpSubServices = $('#SubServices');
drpSubServices.children('option[class=SoftwareServices]').show();
drpSubServices.children('option[class=HSE]').hide();
drpSubServices.children('option[class=AIMS]').hide();
drpSubServices.children('option[class=EngineeringServices]').hide();
return;
}
//AIMS
if (ValueSelected == "m-AIMS") {
$("#SubServices").show();
var drpSubServices = $('#SubServices');
drpSubServices.children('option[class=SoftwareServices]').hide();
drpSubServices.children('option[class=HSE]').hide();
drpSubServices.children('option[class=AIMS]').show();
drpSubServices.children('option[class=EngineeringServices]').hide();
return;
}
//HSE
if (ValueSelected == "m-HSE") {
$("#SubServices").show();
var drpSubServices = $('#SubServices');
drpSubServices.children('option[class=SoftwareServices]').hide();
drpSubServices.children('option[class=HSE]').show();
drpSubServices.children('option[class=AIMS]').hide();
drpSubServices.children('option[class=EngineeringServices]').hide();
return;
}
//Engineering Services
if (ValueSelected == "m-ES") {
$("#SubServices").show();
var drpSubServices = $('#SubServices');
drpSubServices.children('option[class=SoftwareServices]').hide();
drpSubServices.children('option[class=HSE]').hide();
drpSubServices.children('option[class=AIMS]').hide();
drpSubServices.children('option[class=EngineeringServices]').show();
return;
}
});
$("#SubServices").change(function () {
var OptionSelected = $(this).find("option:selected");
var ValueSelected = OptionSelected.val();
if (ValueSelected == "Other") {
$('#divDescription').show();
}
else {
$('#divDescription').hide();
}
});
$("#btnSubmit").click(function () {
var name = $("#name").val();
var email = $("#email").val();
var mobileno = $("#mobileno").val();
var MainServiceName = $("#MainServices").find(":selected").text();
var SubServiceName = $("#SubServices").find(":selected").text();
var Description = $("#Description").val();
var EnquiryForm = {
'name': name,
'email': email,
'mobileno': mobileno,
'MainServiceName': MainServiceName,
'SubServiceName': SubServiceName,
'Description': Description
}
//alert(EnquiryFormViewModel.name);
@*$.post("/Home/EnquiryForm", EnquiryForm, function(returnedData) {
//alert(returnedData.data);
window.location.href= '@Url.Action("Thankyou", "Others", new {message= "Thank you for contacting us. We'll get back to you soon." })';
});*@
});
</script>
推荐答案
我知道它有些旧.但是我找到了解决我可能遇到的问题的方法.
I know it's a bit old. But I found a solution for my likely problem.
问题是；车轮事件是否需要是被动的.诸如chrome之类的现代浏览器威胁为"passive = true".因此出现异常.
The problem is; wheel event needs to be passive or not. Modern browsers such as chrome threated as it passive=true. So exception rises.
找到Wheel事件监听器，例如" window.addEventListener('wheel'，func)"或" window.addEventListener('wheel'，func，true | false)"，并将其更改为" window.addEventListener('wheel'，func，{passive:false})".
Find addition of wheel event listener something like "window.addEventListener('wheel', func)" or "window.addEventListener('wheel', func, true|false)" and change it as "window.addEventListener('wheel', func, {passive:false})".
我的问题就这样解决了.
My problem solved like that.
这篇关于由于目标被视为被动，因此无法防止被动事件侦听器内的Default?为什么滚动时出现此错误?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
