我有一个有两个输入的下拉菜单..在前两个当我按+或-..它增加或减少的值..但它关闭我的下拉菜单，并启动我的窗体..
// Prevent closing dropdown on click minus button
document.querySelector("button.bk-search-minus").addEventListener("click", preventDropdownClose);
// Prevent closing dropdown on click plus button
document.querySelector("button.bk-search-plus").addEventListener("click", preventDropdownClose);
// Prevent closing dropdown
function preventDropdownClose(event) {
event.stopPropagation();
}
function incrementValueInput(parentNode, event) {
var quantityEl = parentNode.querySelector('.quantity');
var value = parseInt(quantityEl.getAttribute('data-value'));
value = isNaN(value) ? 0 : value;
value++;
quantityEl.setAttribute('data-value', value);
quantityEl.textContent = value;
// Add event listener to select to prevent closing dropdown
select.addEventListener("click", (event) => {
event.stopPropagation();
event.stopImmediatePropagation()
});
}
function decrementValueInput(parentNode, event) {
var quantityEl = parentNode.querySelector('.quantity');
var value = parseInt(quantityEl.getAttribute('data-value'));
value = isNaN(value) ? 0 : value;
value--;
value = value < 0 ? 0 : value;
quantityEl.setAttribute('data-value', value);
quantityEl.textContent = value;
}<form id="booking-search-form" action="https://www.booking.com/searchresults.ro.html" method="get"
target="_blank" style="display: flex; justify-content: center;">
<div class="container">
<div class="hakolal-search-row-bk">
<div class="col-sm hakolal-search-conf">
<label class="hakolal-datepiker">צ’ק אין</label>
<input class="hk-datepicker-input" type="date" id="checkin" name="checkin">
</div>
<div class="col-sm hakolal-search-conf">
<label class="hakolal-datepiker">צ’ק אווט</label>
<input class="hk-datepicker-input" type="date" id="checkout" name="checkout">
</div>
<div class="col-sm hakolal-search-conf">
<div class="dropdown">
<button class="btn btn-default dropdown-toggle hk-numb-of-guest" type="button"
id="dropdownMenu1" data-toggle="dropdown" aria-haspopup="true"
aria-expanded="true">
<img class="bk-search-icon dropdown-hk"
src="/wp-content/uploads/2023/03/groups_FILL0_wght400_GRAD0_opsz48.svg"
alt="children"><span>מספר אורחים</span></button>
<div id="content" class="content dropdown-menu" aria-labelledby="dropdownMenu1">
<div class="modal-header hk-bk-search">
<button type="button" class="close-hk-search" data-dismiss="modal"
aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="list number-input">
<img class="bk-search-icon"
src="/wp-content/uploads/2023/03/8725461_bed_double_icon.svg"
alt="room">
<label for="rooms" class="list">חדר</label>
<div style="position: absolute; left: 5%; display: flex;"
class="search-button-section">
<button onclick="decrementValueInput(this.parentNode)"
class="bk-search-minus">
-
</button>
<div id="bk-room" class="quantity bk-search-input" data-value="1"
contenteditable="false" onclick="preventDropdownClose(event)">1
</div>
<button onclick="incrementValueInput(this.parentNode)"
class="bk-search-plus">
+
</button>
</div>
</div>
<div class="list number-input" id="adults-list">
<img class="bk-search-icon"
src="/wp-content/uploads/2023/03/person_FILL0_wght400_GRAD0_opsz48.svg"
alt="adults">
<label for="adults" class="list">שני מבוגרים</label>
<div style="position: absolute; left: 5%; display: flex;"
class="search-button-section">
<button onclick="decrementValueInput(this.parentNode)"
class="bk-search-minus">
-
</button>
<div id="bk-adults" class="quantity bk-search-input" data-value="2"
contenteditable="false" onclick="preventDropdownClose(event)">2
</div>
<button onclick="incrementValueInput(this.parentNode)"
class="bk-search-plus">
+
</button>
</div>
</div>
<div class="list number-input" id="children-list">
<img class="bk-search-icon"
src="/wp-content/uploads/2023/03/child_care_FILL0_wght400_GRAD0_opsz48.svg"
alt="children">
<label for="children" class="list">0 ילד</label>
<div style="position: absolute; left: 5%; display: flex;"
search-button-section">
<div class="bk-search-minus" onclick="decrementValue(this.parentNode, event)">
-
</div>
<div id="bk-childrens" class="quantity bk-search-input" data-value="0"
contenteditable="false" onclick="preventDropdownClose(event)">
0
</div>
<div class="bk-search-plus" onclick="incrementValue(this.parentNode, event)">
+
</div>
</div>
</div>
<div id="children-ages"></div>
</div>
</div>
</div>
<div class="col-sm hakolal-search-conf">
<button type="submit" class="btn btn-info hakolal-search-bk">לחפש</button>
</div>
</div>
</div>
</form>如果你能帮我的话，我会帮你很多的。我不明白为什么每次我按+或-下拉菜单都会关闭。
这里是儿童JS的一部分。
// function for plus button to increase value
function incrementValue(parentNode) {
var quantityEl = parentNode.querySelector('.quantity');
var value = parseInt(quantityEl.getAttribute('data-value'));
value = isNaN(value) ? 0 : value;
value++;
quantityEl.setAttribute('data-value', value);
quantityEl.textContent = value;
const childrenAgesDiv = document.querySelector("#children-ages");
const select = document.createElement("select");
select.setAttribute("id", `child-${value}-age`);
select.setAttribute("name", `age-${value}`);
select.classList.add("bk-search-age");
for (let j = 1; j <= 17; j++) {
const option = document.createElement("option");
option.setAttribute("value", j);
option.innerText = j;
select.appendChild(option);
}
const label = document.createElement("label");
label.setAttribute("for", `child-${value}-age`);
label.classList.add("bk-search-age");
label.innerText = `גיל ילד ${value}`;
const div = document.createElement("div");
div.classList.add("bk-search-select-row");
div.appendChild(label);
div.appendChild(select);
childrenAgesDiv.appendChild(div);
// Add event listener to select to prevent closing dropdown
select.addEventListener("click", (event) => {
event.stopPropagation();
});
// Prevent closing dropdown
event.stopPropagation();
}
// function for minus button to decrease value
function decrementValue(parentNode) {
var quantityEl = parentNode.querySelector('.quantity');
var value = parseInt(quantityEl.getAttribute('data-value'));
value = isNaN(value) ? 0 : value;
value--;
value = value < 0 ? 0 : value;
quantityEl.setAttribute('data-value', value);
quantityEl.textContent = value;
const childrenAgesDiv = document.querySelector("#children-ages");
if (childrenAgesDiv.children.length > 0) {
childrenAgesDiv.removeChild(childrenAgesDiv.lastChild);
}
// Prevent closing dropdown
event.stopPropagation();
}
// Prevent closing dropdown
function preventDropdownClose(event) {
event.stopPropagation();
}但在这里它工作得很好..它不关闭我的下拉菜单时，点击+或-.任何帮助在这里？
1条答案
按热度按时间afdcj2ne1#
虽然HTML事件属性（如
onclick）确实触发了提供的回调，但该回调不会自动传递到首先触发事件的event对象的引用。此外，您的事件回调具有第二个参数event，但您没有使用第二个参数调用回调，因此event为undefined。下面是一个例子：
当您使用
.addEventListener()设置事件时，回调会自动传递（作为第一个参数）一个对event对象的引用，因此使用该技术（这是正确的现代方法）是有效的。再举个例子：
一个二个一个一个