Кнопка странно не кликабельна - PullRequest
Новая
       45

Кнопка странно не кликабельна

8 голосов
/ 04 июля 2019

Я пытаюсь создать веб-приложение, но столкнулся с проблемой.

Большинство интерфейсов приложения состоят из множества кнопок, и я столкнулся со странным явлением, при котором я не могу щелкнуть некоторые кнопки (отсутствует анимация нажатия, и onclick () не запускается).

Я заметил, что там, где несколько кнопок расположены друг над другом, кликабельна только последняя строка кнопок.

Я создал минимальный, полный и проверяемый пример. 

<html>
<body>
    <div style="padding-top: 20%;" id="div1">
        <button>
            Button 1
        </button><br />
        <button>
            Button 2
        </button>
    </div>
    <script>
        document.getElementById("div1").style.display = "initial";
    </script>
</body>
</html>

Дальнейшие наблюдения / заметки:

Когда вы выбираете элемент в меню разработчика, вы не можете выбрать кнопки, которые не работают.

Я использую Firefox. У меня возникает аналогичная проблема с моим приложением в Chrome, но неправильно функционирующие кнопки отличаются от тех, которые ломаются в Firefox.

Я пытаюсь создать одностраничное веб-приложение, скрывая и показывая различные элементы <div> (разные экраны), устанавливая display: none; и display: initial; соответственно. Это причина для <script>. Есть ли лучший способ, которым я должен это делать?

Ответы [ 2 ]

7 голосов
/ 04 июля 2019

display: initial; эквивалентно display: inline; в вашем случае.

Затем padding-top применяется к каждой строке содержимого, в результате чего вторая строка закрывает первую строку. Это легче увидеть, если вы добавите фон в содержащий div. 

#div1 {
	padding-top: 15px;
	display: initial;
	background: #f00;
}
<div id="div1">
	<button>
		Button 1
	</button>
	<br>
	<button>
		Button 2
	</button>
</div>
0 голосов
/ 04 июля 2019 

<html>
<body>
    <div style="padding-top: 20%;">
        <button>
            Button 1
        </button><br />
        <button>
            Button 2
        </button>
    </div>

</body>
</html>
...