Onclick mit CSS deaktivieren :: Möglich?

Ich möchte onclick Ereignis mit CSS deaktivieren. Möglich?Onclick mit CSS deaktivieren :: Möglich?

Lassen Sie uns sagen, ich habe

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

und nach Klasse Hinzufügen "disabled"

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

Ich möchte Onclick-Ereignis für dieses Element deaktivieren, so würde onclick="btnCopy(this);" nicht aktiv sein.

Und "disabled" Klasse

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

Entfernen würde es wieder normal, so wird onclick Ereignis aktiv sein.

Quelle

2012-07-12 Ωmega

CSS Elemente forstyling, nicht für die Reaktion (oder nicht), an Veranstaltungen (außer: schweben Sachen). –

Sie können html 'disabled' Attribut –

verwenden': Hover' ist sowieso kein Ereignis. – BoltClock

Fügen Sie Javascript zu Ihrer btnCopy Funktion hinzu, um zu überprüfen, ob das Parameterelement die disabled Klasse hat oder nicht.

Die Verwendung von CSS zum Ändern des Verhaltens von JavaScript ist nicht möglich. CSS dient zum Formatieren von HTML-Elementen, JavaScript zum Behandeln des Verhaltens von Ereignissen und der Site. CSS und JavaScript sind zwei sehr unterschiedliche Dinge. Das einzige, was mit CSS möglich ist, besteht darin, zu verhindern, dass ein Benutzer auf eine Eingabe klickt (z. B. Schaltfläche). Mit der CSS-Lösung deaktivieren Sie den Code im onclick-Ereignis nicht. Sie deaktivieren nur die Fähigkeit des Benutzers, das onclick-Ereignis auszulösen.

Es gibt jedoch viele Möglichkeiten, Dinge auf einer Seite zu ändern (mit noch mehr JavaScript oder mit einigen Plugins für Ihren Browser), was es möglich machen würde, trotz CSS-Pseudo-Element auf die Schaltfläche zu klicken. Aus diesem Grund wird die Verwendung von CSS für dieses nicht empfohlen.

Quelle

2012-07-12 12:11:06

Das mache ich jetzt, aber ... wäre schön, mit CSS etwas Ordentliches zu haben .. –

Wie MarcB als Kommentar zu deiner Frage gesagt hat: CSS ist für Stylingelemente gedacht, nicht für die Behandlung von Events. Sie können es nicht mehr mit CSS als das, wenn Sie nicht die hackische Lösung verwenden, kaufen Guy Fawkes ein unklickbares Pseudo-Element für den Button hinzufügen (was ich denke, keiner von uns würde empfehlen). –

@ Ωmega Warum sollten Sie es mit CSS machen, wenn es mit JavaScript umgehen soll? Ist es nicht besser, CSS so zu verwenden, wie es verwendet werden soll, und JavaScript so zu verwenden, wie es gedacht ist? –

Wenn Sie Javascript verwenden, um Klassen hinzuzufügen und zu entfernen, warum verwenden Sie es nicht einfach, um das Klickereignis zu deaktivieren?

Quelle

2012-07-12 12:09:14

Weil ich einmal 'onclick =" "' eingestellt habe, dann weiß ich nicht, was vorher da war ... Ich möchte Tasten in Masse aktivieren/deaktivieren ... –

@ Ωmega Nur eine Flagge in Javascript und im onclick Ereignisse in Javascript überprüfen, ob die Variable wahr/falsch ist. Ansonsten verwende einfach die css disabled-Eigenschaft. –

Es ist hackish, aber ich würde vorschlagen, pseudo-Elemente:

auf einer Schaltfläche mit einem behinderten Klasse, können Sie die Taste, um ein Pseudoelement schaffen könnten bedeckt, damit es nicht anklickbar ist.

Aber es würde mehr Sinn machen, Javascript zu verwenden, da Sie bereits, dass die Verwendung Klassen hinzuzufügen und zu entfernen ...

EDIT: nicht empfohlen, aber hier geht:

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

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

Quelle

2012-07-12 12:10:44 Krimo

Bearbeitete meine Antwort, das sollte funktionieren; – Krimo

Es macht einfach keinen Sinn, ein Pseudo-Element hinzuzufügen, wo man einfach JavaScript benutzen kann (es ist eine Art Zweck, das * Verhalten * zu behandeln) – Krimo

@ Ωmega Es wird nicht genau unterstützt, es ist nur ein Nebeneffekt von den Dingen, die CSS unterstützt. Ich habe meine Antwort mit ein wenig mehr Details über die JavaScript vs CSS-Lösung aktualisiert. –

Wenn Sie die Klasse "disabled" hinzufügen oder entfernen möchten, können Sie auch in Ihrem Event-Handler nach dieser Klasse suchen, und dann nichts tun it-Element hat die Klasse deaktiviert.

Quelle

2012-07-12 12:13:26 Litek

Das ist, was ich gerade mache ... –

-2

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

müsste es mit Javascript gemacht werden. Ein if(indexOf('disabled') == -1) sollte den Trick machen.

Quelle

2012-07-12 12:18:40 Dpolehonski

Ich möchte nur hinzufügen, es ist nicht schön. Es wäre besser, dies innerhalb des Event-Handlers zu tun oder eine Funktion in der Mitte zu haben, die den Check durchführt. – Dpolehonski

Auch die Verwendung eines indexof für den Klassennamen entspricht der Klasse "notdisabled", wenn diese für das Element vorhanden wäre. –

-3

Eine Möglichkeit, dies ausschließlich über CSS zu tun, ist die Anzeige eines unklickbaren unsichtbaren Overlays bei Hover.

Demo: http://jsfiddle.net/FNVmh/1/

Quelle

2012-07-12 12:28:55 techfoobar

Alles falsch mit diesem Ansatz? Es verwendet nur CSS-Pseudo-Ereignisse für den Zweck .. Nein JS sogar .. – techfoobar

Danke, aber ich möchte nicht 'Eingang' Elemente aus mehr Gründen innen verwenden, einer von ihnen ist Fokus ... –

Ok. aber die Eingabe ist deaktiviert, so dass es nie den Fokus bekommen wird. irgendwelche anderen Gründe? (Aus Neugier, damit ich etwas Neues lernen kann .. :) – techfoobar

In einigen Browsern Sie pointer-events: none einstellen können, aber das deaktiviert alle Mausereignisse nicht nur Klicks. Siehe: https://developer.mozilla.org/en/CSS/pointer-events/

Quelle

2012-07-12 12:39:50

+1 :: nette saubere Lösung, aber (vorerst) Mangel an Unterstützung. –

Sie können Javascript verwenden, um die Schaltflächen onclick Ereignis zu deaktivieren, indem Sie diese Zeile von Javascript hinzufügen.

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

Die beste Option ist wahrscheinlich jQuery zu verwenden und überprüfen, ob btnCopy die ‚behindert‘ Klasse.

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

Viel Glück!

Quelle

2012-07-12 13:18:59

Wie würden Sie 'element.onclick = null;' zurück auf das Original umkehren, wenn 'disabled' entfernt wird? Ich muss die deaktivierte Klasse für mehrere Elemente aktivieren oder deaktivieren. Ich möchte nicht 'onclick' für jedes Element in einer separaten Zeile festlegen ... –

Sie können dies tun.

pointer-events: none; 
cursor: default;

mehr here

Quelle

2015-10-20 14:16:24 user2591988

Der Cursor wird ignoriert, wenn 'Zeiger-Ereignisse' auf' none' gesetzt sind –

Dies ist, wie Bootstrap es tun.

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

Sie können nur cursor: not-allowed; halten und wenn Sie Reset der Stile nicht Sie sie benötigen dann entfernen opacity: 0.65; filter: alpha(opacity=65); box-shadow: none;

Quelle

2016-05-09 05:32:39 Syed

Onclick mit CSS deaktivieren :: Möglich?

Antwort

Verwandte Themen