30

onclickCSSでイベントを無効にしたい。可能？

私が持っているとしましょう

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

クラス「無効」を追加することにより

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

この要素の onclick イベントをオフにしonclick="btnCopy(this);"たいので、アクティブになりません。

そして、「無効な」クラスを削除することにより

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

通常に戻るため、onclickイベントがアクティブになります。

4

10 に答える 10

29

一部のブラウザでは を設定できますがpointer-events: none、クリックだけでなくすべてのマウス イベントが無効になります。参照: https://developer.mozilla.org/en/CSS/pointer-events/

于 2012-07-12T12:39:50.773 に答える
12

関数にJavascript を追加してbtnCopy、パラメータ要素にdisabledクラスがあるかどうかを確認します。

CSS を使用して JavaScript の動作を変更することはできません。CSS は HTML 要素をスタイリングするためのもので、JavaScript はイベントやサイトの動作を処理するためのものです。CSS と JavaScript は 2 つの非常に異なるものです。CSS で可能な唯一のことは、ユーザーが入力 (ボタンなど) をクリックできないようにすることです。CSS ソリューションでは、onclick イベントでコードを無効にすることはありません。ユーザーが onclick イベントをトリガーする機能を無効にするだけです。

ただし、ページ上の内容を変更する方法は多数あり (JavaScript をさらに使用したり、ブラウザーのプラグインを使用したりします)、CSS 疑似要素にもかかわらずボタンをクリックできるようになる可能性があります。そのため、これに CSS を使用することはお勧めしません。

于 2012-07-12T12:11:06.170 に答える
6

ハックですが、疑似要素を使用することをお勧めします。

クラスが無効になっているボタンでは、ボタンを覆う疑似要素を作成して、クリックできないようにすることができます。

ただし、クラスの追加と削除にすでに JavaScript を使用しているため、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;
}
于 2012-07-12T12:10:44.383 に答える
3

これがブートストラップのやり方です。

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

保持することができcursor: not-allowed;、スタイルをリセットする必要がない場合は、それらを削除しますopacity: 0.65; filter: alpha(opacity=65); box-shadow: none;

于 2016-05-09T05:32:39.413 に答える
2

javascript を使用してクラスを追加および削除している場合、それを使用してクリック イベントを無効にしないのはなぜですか?

于 2012-07-12T12:09:14.800 に答える
0

このJavaScript行を追加することで、JavaScriptを使用してボタンonclickイベントを無効にできます。

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

おそらく最良のオプションは、jQueryを使用して、btnCopyに「disabled」クラスがあるかどうかを確認することです。

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

幸運を！

于 2012-07-12T13:18:59.293 に答える
0

クラス「無効」を追加または削除する場合は、イベント ハンドラーでこのクラスを確認し、何もしないよりも、要素のクラスが無効になっていることを確認します。

于 2012-07-12T12:13:26.827 に答える
-2 
<div id="btnCopy" class="button" 
    onClick="if(this.className.indexOf('disabled') == -1){btnCopy(this);}">
    <img src="copy.png">
</div>

Javascriptで行う必要があります。if(indexOf('disabled') == -1)トリックを行う必要があります。

于 2012-07-12T12:18:40.367 に答える
-3

純粋に CSS を介してそれを行う 1 つの方法は、クリックできない非表示のオーバーレイをホバー時に表示することです。

デモ: http://jsfiddle.net/FNVmh/1/

于 2012-07-12T12:28:55.293 に答える