我有 ASP.net mvc 项目。在我的预订页面，下拉菜单工作正常。但是当我切换移动视图时，在 javascript 端出现错误。错误是
<块引用>[干预] 无法阻止被动事件侦听器中的默认值 由于目标被视为被动。看 https://www.chromestatus.com/features/5093566007214080
我检查了这个错误，发现了 Unable to preventDefault inside passive event listener 这个主题。并应用了解决方案。他们都没有工作！
我试过了
给出#RefectoryId 样式的触摸动作：无； 没用！
document.addEventListener("mousewheel", this.mousewheel.bind(this), {passive: false }); 没用
document.addEventListener("touchmove", this.mousewheel.bind(this), {passive: false }); 没用
我希望我的下拉菜单在移动视图上工作，我再说一遍，它在普通视图上运行完美。只是不要在移动视图上工作。
我的 JavaScript 方面
<script>
var reservationCount = 0;
var totalAmount = 0;
$(document).ready(function () {
$("#reservationCount")[0].textContent = "(" + reservationCount + ")";
//İlk açıldığında rezervasyon sayfasının acık gelmesi için
var tablinks = document.getElementById("reservationPageHead");
tablinks.className = tablinks.className + " active";
document.getElementById('reservationPage').style.display = "block";
$("#RefectoryId").select2({
allowClear: true,
placeholder: 'Yemekhane Seçiniz',
// dropdownParent: $(".bootbox-body"),
});
var refectorySelect = $('#RefectoryId');
refectorySelect.on("select2:select", function (e) {
var foodMealId = $("#FoodMealId").val();
var refectoryId = $("#RefectoryId").val();
$.ajax({
url: "@Url.Action("GetRefectoryWithFoodMeal", "Reservation", new { area = "Common" })",
data: { refectoryId: refectoryId },
type: "POST",
async: false,
success: function (returnData) {
if (returnData.data == undefined) {
PageToastr(returnData.type, returnData.message, returnData.title);
}
else {
//FoodMeal List
$("#FoodMealId option[value]").remove();
$("#FoodMealId").select2({
allowClear: true,
placeholder: 'Seçiniz',
data : returnData.data,
});
}
},
beforeSend: function () {
$(".loaderDiv").show();
$(".loader").show();
},
complete: function () {
$(".loaderDiv").hide();
$(".loader").hide();
},
error: function (xhr, status, err) {
if (xhr.status === 999) {
noAuthorize(this.url);
}
}
});
var foodMealId = $("#FoodMealId").val();
GetCalendarMenuPartial(foodMealId, refectoryId);
});
$("#FoodMealId").select2({
allowClear: true,
placeholder: 'Öğün Seçiniz',
//dropdownParent: $(".bootbox-body"),
});
var foodMealSelect = $('#FoodMealId');
foodMealSelect.on("select2:select", function (e) {
var foodMealId = $("#FoodMealId").val();
var refectoryId = $("#RefectoryId").val();
GetCalendarMenuPartial(foodMealId, refectoryId);
});
// Rezervasyonu tamamla için tooltip
$('#completeReservation').tooltip('update');
});
</script>
我的所有代码
<div class="clearfix">
<div class="row">
<div class="col-xl-8 col-lg-8 col-md-12 col-sm-12">
<div class="alert alert-secondary" role="alert">
<strong><i class="fa fa-exclamation-circle"></i> Önemli Bilgi</strong> - Tamamlanan rezervasyonlar iptal edilemez. Sadece farklı bir tarihe ertelenebilir.
</div>
<div class="m-portlet m-portlet--tabs m-portlet--mobile ">
<div class="m-portlet__head">
<div class="m-portlet__head-toolbar">
@*<ul class="nav nav-tabs nav-tabs-line nav-tabs-line-brand nav-tabs-line-2x nav-tabs-line-right nav-tabs-bold" role="tablist">
<li class="nav-item">
<a id="reservationPageHead" class="nav-link active" data-toggle="tab" role="tab" aria-selected="true">
<i class="fa fa-calendar-alt" aria-hidden="true"></i>Rezervasyon Seçimi
</a>
</li>
<li class="nav-item">
<a id="paymentPageHead" class="nav-link" data-toggle="tab" role="tab" aria-selected="false">
<i class="fa fa-credit-card" aria-hidden="true"></i>Ödeme Yap
</a>
</li>
</ul>*@
<div class="tab">
<button id="reservationPageHead" class="tablinks"><i class="fa fa-calendar-alt" aria-hidden="true"></i> Rezervasyon Seçimi</button>@* onclick="openTab(event, 'reservationPageHead', 'reservationPage')"*@
<button id="paymentPageHead" class="tablinks"> <i class="fa fa-credit-card" aria-hidden="true"></i> Ödeme Yap</button>@* onclick="openTab(event, 'paymentPageHead', 'paymentPage')"*@
</div>
</div>
</div>
<div class="m-portlet__body" style="padding-top:12px;">
<div class="tab-content">
@*<div id="London" class="tabcontent">
<h3>London</h3>
<p>London is the capital city of England.</p>
</div>
<div id="Paris" class="tabcontent">
<h3>Paris</h3>
<p>Paris is the capital of France.</p>
</div>
<div id="Tokyo" class="tabcontent">
<h3>Tokyo</h3>
<p>Tokyo is the capital of Japan.</p>
</div>*@
<div class="tab-pane active tabcontent" id="reservationPage" role="tabpanel">
<div class="col-sm-12 col-md-12">
<div class="form-group row rowR">
<label class="form-control-label col-md-4"><strong>Yemekhane</strong> </label>
***<div class="col-md-8">
@Html.DropDownListFor(x => x.RefectoryId, new SelectList(Model.Refectories, "Id", "Name"), ("Seçiniz"), new { Id = "RefectoryId", @class = "form-control select2" })
</div>
</div>
<div class="form-group row rowR">
<label class="form-control-label col-md-4"><strong>Öğün</strong> </label>
<div class="col-md-8">
@Html.DropDownListFor(x => x.FoodMealId, new SelectList(Model.FoodMeals, "Id", "Name"), ("Seçiniz"), new { Id = "FoodMealId", @class = "form-control select2" })***
</div>
</div>
</div>
<div id="calendarMenuPartial" class="row">
</div> <!-- row -->
</div> <!-- tab-pane -->
<div class="tab-pane tabcontent" id="paymentPage" role="tabpanel">
@using (Html.BeginForm("DoPaymentSave", "Reservation", FormMethod.Post))
{
@Html.HiddenFor(x => x.AddCardMenuString)
@Html.HiddenFor(x => x.Description)
<div class="row">
@*<div class="col">
<div class="card paymentCard bg-light mb-4" style="min-height: 300px;">
<div class="card-header"><i class="fa fa-credit-card-alt"></i> Kart Görseli</div>
<div class="card-body" style="min-height:264px;">
<div class='card-wrapper'></div>
</div>
</div>
</div>*@
<div class="col">
<div class="card paymentCard bg-light mb-4">
@* style="min-height: 405px;" ozelliği gecici olarak verildi. Mobil uyumlu değil.*@
<div class="card-header"><i class="fa fa-credit-card"></i> Kart Bilgileri</div>
<div class="card-body">
<div class="row">
<div class="col-xl-6 col-md-12 col-sm-12 col-xs-12">
<div class="row">
<div class="col-sm-12">
<h5>
<i class="fa fa-credit-card"></i> Kart Numarası <br />
</h5>
@Html.TextBoxFor(x => x.number, new { @name = "number", @type = "text", @class = "form-control card-number", @placeholder = "16 Haneli Kart Numarası", @maxlength = "19" })
</div>
</div>
<div class="row">
<div class="col-sm-12">
<h5>
<i class="fa fa-user"></i> Kart Sahibi <br />
</h5>
@Html.TextBoxFor(x => x.name, new { @name = "name", @type = "text", @class = "form-control name", @placeholder = "Kart Sahibi" })
</div>
</div>
<div class="row">
<div class="col-sm-6">
<h5>
<i class="fa fa-calendar"></i> Son Kul. Tarihi (Ay) <br />
</h5>
@Html.DropDownListFor(x => x.expirymonth, new List<SelectListItem>()
{
new SelectListItem() { Value = "01", Text = "01" },
new SelectListItem() { Value = "02", Text = "02" },
new SelectListItem() { Value = "03", Text = "03" },
new SelectListItem() { Value = "04", Text = "04" },
new SelectListItem() { Value = "05", Text = "05" },
new SelectListItem() { Value = "06", Text = "06" },
new SelectListItem() { Value = "07", Text = "07" },
new SelectListItem() { Value = "08", Text = "08" },
new SelectListItem() { Value = "09", Text = "09" },
new SelectListItem() { Value = "10", Text = "10" },
new SelectListItem() { Value = "11", Text = "11" },
new SelectListItem() { Value = "12", Text = "12" },
}, null, new { @name = "expiry-month", @type = "text", @class = "form-control expiry-month", @placeholder = "AA" })
</div>
<div class="col-sm-6">
<h5>
<i class="fa fa-calendar"></i> Son Kul. Tarihi (Yıl) <br />
</h5>
@{
var thisYear = DateTime.Now.Year;
var expiryYears = new List<SelectListItem>();
expiryYears.Add(new SelectListItem() { Value = thisYear.ToString(), Text = thisYear.ToString() });
var xYear = thisYear;
var one = 1;
for (int i = 0; i < 15; i++)
{
xYear += one;
expiryYears.Add(new SelectListItem() { Value = xYear.ToString(), Text = xYear.ToString() });
}
}
@Html.DropDownListFor(x => x.expiryyear, expiryYears, null, new { @name = "expiry-year", @type = "text", @class = "form-control expiry-year", @placeholder = "YYYY" })
</div>
</div>
<div class="row">
<div class="col-sm-12">
<h5>
<i class="fa fa-lock"></i> CVV <br />
</h5>
@Html.TextBoxFor(x => x.cvc, new { @name = "cvc", @type = "text", @class = "form-control cvc", @placeholder = "CVV", @maxlength = "3" })
</div>
</div>
<div class="row">
<div class="col-sm-12">
<h5>
<i class="fa fa-lira-sign"></i> Tutar <br />
</h5>
@Html.TextBoxFor(x => x.TotalAmount, new { id = "TotalAmount", @type = "text", @class = "form-control", @placeholder = "Tutar", @readonly = "readonly" })<br />
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col">
<div class="form-group">
<button id="backReservation" type="button" class="btn btn-danger btn-lg mr-4 pull-left" style="font-size:14px;">GERİ</button>
</div>
</div>
<div class="col">
<div class="form-group">
<input id="btnDoPayment" type="submit" class="btn btn-success btn-lg mr-4 pull-right" style="font-size: 14px; " value="ÖDEME YAP" />
</div>
</div>
</div>
@*</form>*@
}
</div> <!-- tab-pane -->
</div>
</div>
</div>
</div>
<div class="col-md-4 col-xs-12">
<div class="row">
<div class="col-sm-12">
<div class="m-portlet m-portlet--mobile shoppingCart ">
<div class="m-portlet__head">
<div class="m-portlet__head-label">
<h3 class="m-portlet__head-title">
<i class="fa fa-shopping-basket"></i> <small>Rezervasyon Listem </small>
<small id="reservationCount" class="text-dark"></small>
</h3>
</div>
</div>
<table id="shopping-cart" style="text-align: center">
<tr>
<td style="display: none">#</td>
<td>Menü</td>
<td>Öğün</td>
<td>Yemekhane</td>
<td>Adet</td>
<td>Fiyat</td>
</tr>
@*<tr>
<td>02.04.2019</td>
<td>1 Adet</td>
<td>₺4,25</td>
</tr>
<tr>
<td>03.04.2019</td>
<td>1 Adet</td>
<td>₺4,25</td>
</tr>
<tr>
<td>05.04.2019</td>
<td>1 Adet</td>
<td>₺4,25</td>
</tr>*@
</table>
<table class="" style="text-align: right; margin-left:10px; margin-right:15px; font-size:15px; float:right">
<tr>
<td> </td>
<td> </td>
<td> </td>
<td>Toplam: </td>
<td id="PayableAmount">₺0.00</td>
</tr>
</table>
</div>
</div>
</div>
<div class="row">
<div class="col-sm-12">
<button id="completeReservation" style="margin-left:auto;margin-right:auto;width:100%" class="btn btn-success mt-5" data-toggle="tooltip" data-placement="top" title="Seçilen menüleri satın almak için tıklayın">Rezervasyonu Tamamla</button>
</div>
</div>
<div class="row mt-5">
<div class="col-sm-12">
<div class="alert alert-secondary">
<table class="table table-striped- table-bordered table-hover">
<thead>
<tr class="m-datatable__row">
<td>ÖĞÜN</td>
<td>BAŞLANGIÇ SAATİ</td>
<td>BİTİŞ SAATİ</td>
</tr>
</thead>
<tbody>
@foreach (var fm in Model.FoodMealsInfo)
{
<tr>
<td>@fm.Name</td>
<td>@fm.StartHour</td>
<td>@fm.EndHour</td>
</tr>
}
</tbody>
</table>
</div>
</div>
</div>
</div>
</div>
</div>
<script>
var reservationCount = 0;
var totalAmount = 0;
$(document).ready(function () {
$("#reservationCount")[0].textContent = "(" + reservationCount + ")";
//İlk açıldığında rezervasyon sayfasının acık gelmesi için
var tablinks = document.getElementById("reservationPageHead");
tablinks.className = tablinks.className + " active";
document.getElementById('reservationPage').style.display = "block";
$("#RefectoryId").select2({
allowClear: true,
placeholder: 'Yemekhane Seçiniz',
// dropdownParent: $(".bootbox-body"),
});
var refectorySelect = $('#RefectoryId');
refectorySelect.on("select2:select", function (e) {
var foodMealId = $("#FoodMealId").val();
var refectoryId = $("#RefectoryId").val();
$.ajax({
url: "@Url.Action("GetRefectoryWithFoodMeal", "Reservation", new { area = "Common" })",
data: { refectoryId: refectoryId },
type: "POST",
async: false,
success: function (returnData) {
if (returnData.data == undefined) {
PageToastr(returnData.type, returnData.message, returnData.title);
}
else {
//FoodMeal List
$("#FoodMealId option[value]").remove();
$("#FoodMealId").select2({
allowClear: true,
placeholder: 'Seçiniz',
data : returnData.data,
});
}
},
beforeSend: function () {
$(".loaderDiv").show();
$(".loader").show();
},
complete: function () {
$(".loaderDiv").hide();
$(".loader").hide();
},
error: function (xhr, status, err) {
if (xhr.status === 999) {
noAuthorize(this.url);
}
}
});
var foodMealId = $("#FoodMealId").val();
GetCalendarMenuPartial(foodMealId, refectoryId);
});
$("#FoodMealId").select2({
allowClear: true,
placeholder: 'Öğün Seçiniz',
//dropdownParent: $(".bootbox-body"),
});
var foodMealSelect = $('#FoodMealId');
foodMealSelect.on("select2:select", function (e) {
var foodMealId = $("#FoodMealId").val();
var refectoryId = $("#RefectoryId").val();
GetCalendarMenuPartial(foodMealId, refectoryId);
});
// Rezervasyonu tamamla için tooltip
$('#completeReservation').tooltip('update');
});
</script>
<script>
function GetCalendarMenuPartial(foodMealId, refectoryId) {
$.ajax({
url: '@Url.Action("NewReservationCalendarMenuPartial", "Reservation", new { area = "Common" })',
data: { foodMealId: foodMealId, refectoryId: refectoryId, addCardMenu: $("#AddCardMenuString").val() },
type: "POST",
success: function (partialPage) {
if (partialPage.title != undefined) {
PageToastr(partialPage.type, partialPage.message, partialPage.title);
if (partialPage.result == '@Enums.ResultStatus.SessionTimeExpired.ToString()') {
setTimeout(function () { window.location.href = '/Login/Login'; }, 5000)
}
}
else {
$("#calendarMenuPartial").html(partialPage);
}
},
beforeSend: function () {
$(".loaderDiv").show();
$(".loader").show();
},
complete: function () {
$(".loaderDiv").hide();
$(".loader").hide();
},
error: function (xhr, status, err) {
if (xhr.status === 999) {
noAuthorize(this.url);
}
}
});
}
</script>