[英]Strange behavior when I use addEventListener() on click. It only happens at mobile devices
我會試着解釋發生了什么。
當我使用 class “隱藏”作為display: none; 隱藏一個按鈕並在單擊后顯示另一個按鈕，它在桌面瀏覽器中運行良好，但是當我在 iPhone、平板電腦等設備上嘗試同樣的事情時，它有一個奇怪的行為，在第二次點擊后，顯然它工作正常，但是該按鈕不會改變，它只會在我點擊它外部時改變。 如果我不這樣做，看起來按鈕不會改變。 我必須單擊一次按鈕才能更改它們並且顯然可以工作，但是僅當我再次單擊按鈕外部時該按鈕才會更改。 它只發生在移動設備中。
我不知道我該怎么做才能在設備中解決這個問題。
const buttonForest = document.querySelector(".button-forest"); const buttonForestSelected = document.querySelector(".button-forest-selected"); function forestButton() { buttonForest.classList.remove("hide"); buttonForestSelected.classList.add("hide"); } function forestButtonSelected() { buttonForest.classList.add("hide"); buttonForestSelected.classList.remove("hide"); } buttonForest.addEventListener("click", function() { forestButtonSelected(); }); buttonForestSelected.addEventListener("click", function() { forestButton(); });
:root { font-size: 62.5%; } main { display: flex; align-self: center; justify-self: center; padding: 5rem; } button { background-color: transparent; border: none; cursor: pointer; position: relative; display: flex; align-items: end; justify-content: center; }.button-container { border: none; position: relative; display: flex; align-items: end; justify-content: center; }.icon-sound:hover.slider { background: white; }.icon-sound:hover.slider::-webkit-slider-thumb { background: white; }.icon-sound:hover.slider::-moz-range-thumb { background: white; }.button-container { border: none; position: relative; display: flex; align-items: end; justify-content: center; }.hide { display: none; }.icon-sound svg path { fill: #e1e1e6; }.icon-sound svg path+path { fill: #323238; }.icon-sound:hover.cor1 { fill: #02799d; }.icon-sound:hover.cor2 { fill: white; } #sounds { display: grid; grid-template-columns: auto auto; gap: 3.2rem; grid-template-areas: "item1 item2" "item3 item4"; }.button-forest-selected.cor1 { fill: #02799d; }.button-forest-selected.cor2 { fill: white; }
<div class="button-container icon-sound"> <button class="button-forest"> <svg width="138" height="152" viewBox="0 0 138 152" fill="none" xmlns="http://www.w3.org/2000/svg" > <path class="cor1" d="M0 24C0 10.7452 10.7452 0 24 0H114C127.255 0 138 10.7452 138 24V128C138 141.255 127.255 152 114 152H24C10.7452 152 0 141.255 0 128V24Z" fill="#E1E1E6" /> <path class="cor2" d="M51.8355 104V99.8H67.0329V87.2H60.8158C56.9934 87.2 53.7352 85.835 51.0411 83.105C48.347 80.375 47 77.0733 47 73.2C47 70.4 47.7599 67.8217 49.2796 65.465C50.7993 63.1083 52.8487 61.3933 55.4276 60.32C55.8421 56.82 57.3503 53.8917 59.9523 51.535C62.5543 49.1783 65.6053 48 69.1053 48C72.6053 48 75.6562 49.1783 78.2582 51.535C80.8602 53.8917 82.3684 56.82 82.7829 60.32C85.3618 61.3933 87.4112 63.1083 88.9309 65.465C90.4507 67.8217 91.2105 70.4 91.2105 73.2C91.2105 77.0733 89.8635 80.375 87.1694 83.105C84.4753 85.835 81.2171 87.2 77.3947 87.2H71.1776V99.8H87.0658V104H51.8355ZM60.8158 83H77.3947C80.0658 83 82.3454 82.0433 84.2336 80.13C86.1217 78.2167 87.0658 75.9067 87.0658 73.2C87.0658 71.24 86.5132 69.455 85.4079 67.845C84.3026 66.235 82.875 65.0333 81.125 64.24L78.9145 63.26L78.6382 60.81C78.3158 58.3367 77.2566 56.2833 75.4605 54.65C73.6645 53.0167 71.5461 52.2 69.1053 52.2C66.6645 52.2 64.5461 53.0167 62.75 54.65C60.9539 56.2833 59.8947 58.3367 59.5724 60.81L59.2961 63.26L57.0855 64.24C55.3355 65.0333 53.9079 66.235 52.8026 67.845C51.6974 69.455 51.1447 71.24 51.1447 73.2C51.1447 75.9067 52.0888 78.2167 53.977 80.13C55.8651 82.0433 58.1447 83 60.8158 83Z" fill="#323238" /> </svg> </button> <button class="button-forest-selected hide"> <svg width="138" height="152" viewBox="0 0 138 152" fill="none" xmlns="http://www.w3.org/2000/svg" > <path class="cor1" d="M0 24C0 10.7452 10.7452 0 24 0H114C127.255 0 138 10.7452 138 24V128C138 141.255 127.255 152 114 152H24C10.7452 152 0 141.255 0 128V24Z" fill="#E1E1E6" /> <path class="cor2" d="M51.8355 104V99.8H67.0329V87.2H60.8158C56.9934 87.2 53.7352 85.835 51.0411 83.105C48.347 80.375 47 77.0733 47 73.2C47 70.4 47.7599 67.8217 49.2796 65.465C50.7993 63.1083 52.8487 61.3933 55.4276 60.32C55.8421 56.82 57.3503 53.8917 59.9523 51.535C62.5543 49.1783 65.6053 48 69.1053 48C72.6053 48 75.6562 49.1783 78.2582 51.535C80.8602 53.8917 82.3684 56.82 82.7829 60.32C85.3618 61.3933 87.4112 63.1083 88.9309 65.465C90.4507 67.8217 91.2105 70.4 91.2105 73.2C91.2105 77.0733 89.8635 80.375 87.1694 83.105C84.4753 85.835 81.2171 87.2 77.3947 87.2H71.1776V99.8H87.0658V104H51.8355ZM60.8158 83H77.3947C80.0658 83 82.3454 82.0433 84.2336 80.13C86.1217 78.2167 87.0658 75.9067 87.0658 73.2C87.0658 71.24 86.5132 69.455 85.4079 67.845C84.3026 66.235 82.875 65.0333 81.125 64.24L78.9145 63.26L78.6382 60.81C78.3158 58.3367 77.2566 56.2833 75.4605 54.65C73.6645 53.0167 71.5461 52.2 69.1053 52.2C66.6645 52.2 64.5461 53.0167 62.75 54.65C60.9539 56.2833 59.8947 58.3367 59.5724 60.81L59.2961 63.26L57.0855 64.24C55.3355 65.0333 53.9079 66.235 52.8026 67.845C51.6974 69.455 51.1447 71.24 51.1447 73.2C51.1447 75.9067 52.0888 78.2167 53.977 80.13C55.8651 82.0433 58.1447 83 60.8158 83Z" fill="#323238" /> </svg> </button> </div>
如何在 javascript id 選擇器中使用 if 條件。 我不想在特定的 id 單擊上運行“window.addEventListener”。 這是我的代碼
[英]How to use if condition in javascript id selector. I want not to run 'window.addEventListener' on particular id click. Here is my code
addEventListener 僅在我在它前面使用 window 時才有效
[英]addEventListener only works when I use window infront of it
按鈕只隱藏標簽的雙擊而不是單擊。 我想單擊一下
[英]button is getting hide only double click of the label not in single click. i want it in single click
.focus() 在未通過單擊激活時在 chrome 移動設備上不起作用。 解決方法？
[英].focus() doesn't work on chrome mobile when not activated with click. Workaround?
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.