it-swarm.com.de

Klicken auf einen deaktivierten Eingang oder eine deaktivierte Schaltfläche

Ist es möglich, auf eine deaktivierte Schaltfläche zu klicken und dem Benutzer ein Feedback zu geben?

HTML:

<input type="button" value="click" disabled>

und JavaScript:

$('input').mousedown(function(event) {
    alert('CLICKED');
});

Der obige Code funktioniert bei mir nicht. Das ist auch nicht:

$('input').live('click', function () {
    alert('CLICKED');
});
21
e1761587

Es gibt keine Möglichkeit, einen Klick auf deaktivierte Elemente zu erfassen. Am besten reagieren Sie auf ein bestimmtes class auf dem Element.

HTML-Markup:

<input type="button" class="disabled" value="click" />

JavaScript-Code:

$('input').click(function (event) {
    if ($(this).hasClass('disabled')) {
        alert('CLICKED, BUT DISABLED!!');
    } else {
        alert('Not disabled. =)');
    }
});

Sie könnten dann CSS-Stil verwenden, um ein deaktiviertes Aussehen zu simulieren:

.disabled
{
    background-color: #DDD;
    color: #999;
}

Hier ist eine jsFiddle Demonstration seiner Verwendung.

22
Jesse

Das Feld readonly kann helfen, da das Klickereignis ausgelöst wird. Beachten Sie jedoch die nterschiede im Verhalten .

<input type="button" value="click" readonly="readonly" />
16

Stellen

input[disabled] {pointer-events:none}

in Ihrem CSS (dies verhindert, dass einige Browser Klicks auf deaktivierte Eingaben vollständig verwerfen), und erfassen Sie den Klick auf ein übergeordnetes Element. Es ist eine sauberere Lösung, IMHO, als ein transparentes Overlay über das Element zu legen, um den Klick zu erfassen. Je nach den Umständen kann es auch viel einfacher sein, den deaktivierten Zustand mit CSS zu "simulieren" (da dies die Eingabe nicht verhindert) eingereicht und erfordert auch das Überschreiben des "deaktivierten" Standardbrowserstils).

Wenn Sie über mehrere solcher Schaltflächen verfügen, benötigen Sie für jede eine eindeutige übergeordnete Schaltfläche, um unterscheiden zu können, auf welche Schaltfläche geklickt wurde, da bei pointer-events:none Das Klickziel die übergeordnete Schaltfläche und nicht die Schaltfläche selbst ist . (Oder Sie könnten die Klickkoordinaten testen, nehme ich an ...).

Wenn Sie ältere Browser unterstützen müssen, überprüfen Sie, welche Browser pointer-events Unterstützen: http://caniuse.com/#search=pointer-events

6
Doin

Sie können nicht ohne eine Problemumgehung, siehe: jQuery erkennen klicken Sie auf deaktiviert Senden-Schaltfläche

Die Browser deaktivieren Ereignisse für deaktivierte Elemente.

Bearbeitet, um Kontext vom Link hinzuzufügen:

Der Fragesteller fand diesen Thread mit einer Erklärung, warum die Ereignisse nicht registriert werden: http://www.webdeveloper.com/forum/showthread.php?t=186057

Firefox und möglicherweise andere Browser deaktivieren DOM-Ereignisse für deaktivierte Formularfelder. Alle Ereignisse, die im deaktivierten Formularfeld beginnen, werden vollständig abgebrochen und nicht in die DOM-Struktur übernommen. Korrigieren Sie mich, wenn ich falsch liege. Wenn Sie jedoch auf die deaktivierte Schaltfläche klicken, ist die Quelle des Ereignisses die deaktivierte Schaltfläche, und das Klickereignis wird vollständig gelöscht. Der Browser weiß buchstäblich nicht, dass auf die Schaltfläche geklickt wurde, und leitet das Klickereignis nicht weiter. Es ist, als würden Sie auf ein schwarzes Loch auf der Webseite klicken.

Die Problemumgehung wäre, die Schaltfläche so zu gestalten, dass sie deaktiviert aussieht, obwohl dies nicht der Fall ist.

4
Andrew Bartel

disabled Elemente erlauben dem Benutzer nicht, mit ihnen zu interagieren.

Also: Nein, Sie können ein onclick nicht auf eine disabled Schaltfläche legen und erwarten, dass es ausgelöst wird.

3
Halcyon

sie können nicht auf die deaktivierte Schaltfläche klicken, sondern auf den deaktivierten Link

$('.btn').on('click', function(e) {
  e.preventDefault();
  $txt = $('div.text');
  if($(this).attr('disabled')){
    $txt.html('CLICKED, BUT DISABLED!!');
  }else{
    $txt.html('Not disabled. =)');
  }
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="text">No action</div>
<input type="button" href="" class="btn" value="click" />
<input type="button" href="" class="btn" value="click disabled" disabled />
<a href="" class="btn">Click</a>
<a href="" class="btn" disabled>Click Disabled</a>
0
sglazkov

<input id="idButton" type="button" value="click" disabled>

$('#idButton').on('click', function() {
    // The button is disabled but this will be executed.
});

Das obige Beispiel funktioniert mit JQuery für deaktivierte Schaltflächen, für die das Ereignis erfasst werden muss.

0
Lisandro

Wie wäre es, wenn Sie die Schaltfläche in ein Element einwickeln und stattdessen auf dieses Element klicken?

<span id="container">
    <input type="button" value="click" disabled>
</span>

Javascript:

$("#container").click(function(){
    alert("Element clicked!");
})
0
Gh61