我想制作一個由按鈕激活的“彈出”框，以減少所有其他元素的不透明度。當用戶點擊框外時，它應該消失并且不透明度應該恢復正常。然而，這兩個功能是相互沖突的。它需要我單擊按鈕兩次才能showBox()被呼叫。hideOnClickOutside(document.querySelector('div'));除非我在瀏覽器的控制臺中重新調用，否則點擊開箱即用不會執行任何操作。為什么我必須單擊“新音頻”兩次，并且為什么hideOnClickOutside()除非重新調用否則不起作用？function showBox() { document.body.style.opacity = "0.5"; document.querySelector('div').style.display = "block";}document.querySelector('button').addEventListener('click', showBox);const isVisible = elem => !!elem && !!(elem.offsetWidth || elem.offsetHeight || elem.getClientRects().length); // source (2018-03-11): https://github.com/jquery/jquery/blob/master/src/css/hiddenVisibleSelectors.jsfunction hideOnClickOutside(element) { const outsideClickListener = event => { if (!element.contains(event.target) && isVisible(element)) { // or use: event.target.closest(selector) === null element.style.display = 'none'; removeClickListener() document.body.style.opacity = "1"; } } const removeClickListener = () => { document.removeEventListener('click', outsideClickListener) } document.addEventListener('click', outsideClickListener)}hideOnClickOutside(document.querySelector('div'));<button>New Audio</button><div style="display: none"> <button>Record Directly</button></div>hideOnClickOutside()函數取自另一個 StackOverflow 答案編輯我發現它需要兩次單擊，因為第一次單擊時，showBox() 被調用，但緊接著，outsideClickListener 也被調用，此時該元素現在可見，并且用戶已單擊該元素的“外部”。這將恢復 的樣式更改showBox()。
1 回答
冉冉說
TA貢獻1877條經驗 獲得超1個贊
最簡單的解決方法是存儲對“新音頻”的引用button，并檢查這是否是target單擊的document。如果是這樣，則從return函數中無需更新DOM。
const button = document.querySelector('button')
button.addEventListener('click', showBox);
// ..
function hideOnClickOutside(element) {
const outsideClickListener = event => {
if (event.target === button) return
// ..
請記住，使用您當前的代碼，該hideOnClickOutside函數只會在第一次isVisible為 true 之前獲取，而 istarget則不是button，因為您在該條件下刪除了事件偵聽器。
function showBox(e) {
document.body.style.opacity = "0.5";
document.querySelector('div').style.display = "block";
}
const button = document.querySelector('button')
button.addEventListener('click', showBox);
const isVisible = elem => !!elem && !!(elem.offsetWidth || elem.offsetHeight || elem.getClientRects().length); // source (2018-03-11): https://github.com/jquery/jquery/blob/master/src/css/hiddenVisibleSelectors.js
function hideOnClickOutside(element) {
const outsideClickListener = event => {
if (event.target === button) return
if (!element.contains(event.target) && isVisible(element)) { // or use: event.target.closest(selector) === null
element.style.display = 'none';
removeClickListener()
document.body.style.opacity = "1";
}
}
const removeClickListener = () => {
document.removeEventListener('click', outsideClickListener)
}
document.addEventListener('click', outsideClickListener)
}
hideOnClickOutside(document.querySelector('div'));
<button>New Audio</button>
<div style="display: none">
<button>Record Directly</button>
</div>
另一個問題是，一旦showBox調用該函數，您實際上可能希望button在外部考慮該函數。讓我們重構您的代碼以存儲對 和 的引用showButton，向中box添加一個標志，并且僅在單擊 時將事件偵聽器添加到文檔，并且僅在顯示該框時刪除事件偵聽器。disableshowButtonshowButton
您可以稍后重構它以適合您的特定用例。這個想法是考慮該應用程序可能處于的各種狀態并創建函數來管理該狀態。
const box = document.querySelector('#box');
const showButton = document.querySelector('#show-button');
showButton.addEventListener('click', showBox);
let isDisabled = false;
const isVisible = elem => !!elem && !!(elem.offsetWidth || elem.offsetHeight || elem.getClientRects().length); // source (2018-03-11): https://github.com/jquery/jquery/blob/master/src/css/hiddenVisibleSelectors.js
function toggleDisabled(bool) {
showButton.attributes.disabled = bool;
isDisabled = bool;
}
function toggleDisplay(display, opacity) {
document.body.style.opacity = opacity;
box.style.display = display;
}
function showBox(event) {
if (!isDisabled) {
event.preventDefault();
event.stopPropagation();
toggleDisplay("block", 0.5);
toggleDisabled(true);
document.addEventListener('click', outsideClickListener);
}
}
function outsideClickListener(event) {
if (!box.contains(event.target) && isVisible(box)) { // or use: event.target.closest(selector) === null
toggleDisplay("none", 1);
toggleDisabled(false);
document.removeEventListener('click', outsideClickListener)
}
}
<button id="show-button">New Audio</button>
<div id="box" style="display: none">
<button>Record Directly</button>
</div>
- 1 回答
- 0 關注
- 113 瀏覽
添加回答
舉報
0/150
提交
取消