Отключить onclick с помощью CSS:: Возможно?

Я хотел бы отключить событие onclick с помощью CSS. Возможно ли это?

Скажем, у меня

<div id="btnCopy" class="button" onclick="btnCopy(this);"><img src="copy.png"></div>

и добавив класс "disabled"

document.getElementById("btnCopy").className += " disabled";

Я хотел бы отключить onclick-событие для этого элемента, поэтому onclick="btnCopy(this);" не будет активным.

И удалив класс "disabled"

document.getElementById("btnCopy").className = 
  document.getElementById("btnCopy").className.replace(/(?:^|\s)disabled(?!\S)/, '');

он вернется к нормальному состоянию, поэтому onclick будет активным.

Ответ 1

Добавьте Javascript в свою функцию btnCopy, чтобы проверить, имеет ли элемент параметра класс disabled или нет.

Использование CSS для изменения поведения JavaScript невозможно. CSS предназначен для стилизации HTML-элементов, JavaScript предназначен для обработки поведения событий и сайта. CSS и JavaScript - это две разные вещи. Единственное, что возможно с CSS, - это запретить пользователю щелкнуть мышью по вводу (например, кнопка). С помощью решения CSS вы не отключите код в событии onclick. Вы отключите возможность пользователя запускать событие onclick.

Однако есть много способов изменить материал на странице (используя еще больше JavaScript или с некоторыми плагинами для вашего браузера), что может позволить щелкнуть по кнопке, несмотря на псевдоэлемент CSS. Вот почему использование CSS для этого не рекомендуется.

Ответ 2

В некоторых браузерах вы можете установить pointer-events: none, но это отключает все события мыши, а не только клики. См.: https://developer.mozilla.org/en/CSS/pointer-events/

Ответ 3

Вы можете сделать это.

pointer-events: none;
cursor: default;

подробнее здесь

Ответ 4

Он взламывает, но я бы предложил использовать псевдоэлементы:

На кнопке с отключенным классом вы можете создать псевдоэлемент, накрывающий кнопку, чтобы она не была нажата.

Но было бы разумнее использовать javascript, поскольку вы уже используете это, чтобы добавлять и удалять классы...

РЕДАКТИРОВАТЬ: Не рекомендуется вообще, но здесь вы идете:

#btnCopy {position:relative;z-index:1;}

.disabled:before {
  content:" ";
  display:block;
  position:absolute;
  top:0;left:0;right:0;bottom:0;
  z-index:10;
}

Ответ 5

Если вы используете javascript для добавления и удаления класса, то почему бы просто не использовать его, чтобы отключить событие click?

Ответ 6

Вот как это делает Bootstrap.

.btn.disabled, .btn[disabled] {
    cursor: not-allowed;
    opacity: 0.65;
    filter: alpha(opacity=65);
    box-shadow: none;
}

Вы можете просто сохранить cursor: not-allowed;, и если вам не нужны reset стилей, вы удалите их opacity: 0.65; filter: alpha(opacity=65); box-shadow: none;

Ответ 7

Если вы хотите добавить или удалить класс "отключено", вы можете также проверить этот класс в обработчике событий и не делать ничего, что у элемента был отключен.

Ответ 8

Вы можете использовать javascript для отключения кнопок onclick, добавив эту строку javascript.

var btnCopy = document.getElementById("btnCopy");
btnCopy.className += " disabled";
btnCopy.onclick = null;

Лучшим вариантом является, вероятно, использование jQuery и проверка того, имеет ли btnCopy класс 'disabled'.

if(!$('btnCopy').hasClass('disabled')){
   //Add code to copy text here
}

Удачи!

Ответ 9

<div id="btnCopy" class="button" 
    onClick="if(this.className.indexOf('disabled') == -1){btnCopy(this);}">
    <img src="copy.png">
</div>

это должно быть сделано с помощью Javascript. if(indexOf('disabled') == -1) должен сделать трюк.

Ответ 10

Один из способов сделать это исключительно с помощью CSS - отображать невидимое невидимое наложение при наведении.

Демо: http://jsfiddle.net/FNVmh/1/