#javascript #jquery #css
Вопрос:
Я пытаюсь показать пользователю модальное предупреждение о том, что кнопка недоступна для нажатия. Кнопка, которую я использовал, недоступна для нажатия из-за pointer-events: none класса on disable .
Даже если кнопка недоступна, я хочу показать предупреждение, если пользователь нажмет на эту кнопку.
Как я могу получить действие щелчка и показать предупреждение? Кто-нибудь может помочь?
.disable { pointer-events: none } lt;button type="button" class="btn disable"gt;Buttonlt;/buttongt; Комментарии:
1. Похоже на явно невыполнимую задачу
2. Разве это не казалось странным во время написания?
3. Lol @Lain — думаю о том же самом
Ответ №1:
Вы можете использовать оболочку и привязать к ней событие click.
document.querySelector('div').onclick = alert.bind(null, 'hey') .disable { pointer-events: none } lt;divgt;lt;button type="button" class="btn disable"gt;Buttonlt;/buttongt;lt;/divgt; Комментарии:
1. А, хорошая идея…
2. @mplungjan: Да, ну, все равно довольно бессмысленно (глупый каламбур).
3. Действительно, немного старомодно.
Ответ №2:
Очевидно, используйте другой способ, чем события указателя
const but = document.getElementById("but") but.addEventListener("mousedown",function(e) { e.preventDefault() this.textContent = "Nope!" }) but.addEventListener("mouseup",function(e) { e.preventDefault() this.textContent = "Button" }) .disable { background-color: light-grey; opacity:.5 } lt;button type="button" id="but" class="btn disable"gt;Buttonlt;/buttongt; jQuery
$("#but") .on("mousedown", function(e) { e.preventDefault() this.textContent = "Nope!" }) .on("mouseup", function(e) { e.preventDefault() this.textContent = "Button" }) .disable { background-color: light-grey; opacity: .5 } lt;script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"gt;lt;/scriptgt; lt;button type="button" id="but" class="btn disable"gt;Buttonlt;/buttongt;