使用CSS禁用onclick ::可能嗎？

我想用CSS禁用onclick事件。可能？使用CSS禁用onclick ::可能嗎？

比方說，我有

<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事件將被激活。

來源

2012-07-12 Ωmega

CSS是forstyling元素，而不是反應（或沒有）的事件（以下情況除外：懸停的東西）。 – 2012-07-12 12:08:51

你可以使用html'disabled'屬性 – 2012-07-12 12:09:12

'：hover'不管怎樣都不是一個事件。 – BoltClock 2012-07-12 12:11:54

將一些JavaScript添加到您的btnCopy函數中，以檢查參數元素是否具有disabled類。

使用CSS來改變JavaScript的行爲是不可能的。 CSS用於設計HTML元素的樣式，JavaScript用於處理事件和網站的行爲。 CSS和JavaScript是兩個完全不同的東西。使用CSS的唯一可能是防止用戶點擊輸入（例如按鈕）。使用CSS解決方案，您不會禁用onclick事件中的代碼。您只能禁止用戶觸發onclick事件。

但是，有很多方法可以改變頁面上的東西（使用更多的JavaScript或使用一些用於瀏覽器的插件），儘管CSS僞元素可以點擊按鈕。這就是爲什麼不推薦使用CSS這個的原因。

來源

2012-07-12 12:11:06

這就是我現在正在做的事情，但是...會很高興有一些與CSS完美結合的東西。 – 2012-07-12 12:13:57

正如MarcB所說的，作爲對您的問題的評論：CSS是用於樣式元素的，而不是用於處理事件。除非你使用黑客解決方案購買Guy Fawkes來添加一個覆蓋按鈕的不可點擊的僞元素（我認爲我們沒有人會推薦），否則你不能再用CSS來獲得它。 – 2012-07-12 12:17:07

@Ωmega當你想用JavaScript來處理這樣的事情時，你爲什麼要用CSS做到這一點？使用CSS的方式不是更好嗎？它的使用方式和JavaScript的使用方式是不是更好？ – 2012-07-12 12:31:23

如果您使用JavaScript添加和刪除類，那麼爲什麼不使用它來啓用禁用點擊事件？

來源

2012-07-12 12:09:14

因爲一旦我設置了'onclick =「」'，那麼我不知道以前有什麼......我想要批量啓用/禁用按鈕... – 2012-07-12 12:15:46

@Ωmega只需在JavaScript中和onclick JavaScript中的事件檢查變量是否爲真/假。否則，只需使用CSS禁用屬性。 – 2012-07-12 12:17:57

它的hackish，但我會建議使用僞元素：

在有傷殘等級的按鈕，你可以創建一個覆蓋按鈕，所以它不是一個可點擊僞元素。

但它會成爲使用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-12 12:10:44 Krimo

編輯我的答案，這應該工作; – Krimo 2012-07-12 12:42:24

只需要添加一個僞元素就沒有什麼意義了，你可以使用JavaScript來做到這一點（這是它的目的，處理*行爲*） – Krimo 2012-07-12 12:59:08

@Ωmega它並不完全支持，它只是CSS支持的一些副作用。我已經更新了我的答案，提供了關於JavaScript vs CSS解決方案的更多細節。 – 2012-07-12 17:15:02

如果你想添加或刪除類「禁用」，你可以在你的事件處理程序中檢查這個類，並且不要做任何事情，它元素禁用類。

來源

2012-07-12 12:13:26 Litek

這就是我現在正在做的... – 2012-07-12 12:16:56

-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-12 12:18:40 Dpolehonski

只是想添加，它不漂亮。最好在事件處理程序中執行它，或者在中間執行檢查。 – Dpolehonski 2012-07-12 12:19:32

另外，只要在類名上使用indexof就可以匹配類「notdisabled」，如果它存在於元素上。 – 2012-07-12 12:29:36

-3

純粹通過CSS做到這一點的一種方法是在懸停時顯示一個無法點擊的不可見疊加層。

演示：http://jsfiddle.net/FNVmh/1/

來源

2012-07-12 12:28:55 techfoobar

這種方法有什麼問題嗎？它只使用CSS僞事件的目的..沒有JS甚至.. – techfoobar 2012-07-12 12:35:08

謝謝，但我不想使用輸入'元素裏面有更多的原因，其中之一是焦點... – 2012-07-12 12:39:45

好的。但輸入被禁用，所以它不會得到重點。任何其他原因？（出於好奇，以便我可以學到新的東西.. :) – techfoobar 2012-07-12 12:42:27

在某些瀏覽器，您可以設置pointer-events: none，但禁用所有鼠標事件不只是點擊。請參閱：https://developer.mozilla.org/en/CSS/pointer-events/

來源

2012-07-12 12:39:50

+1 ::很好的整潔的解決方案，但（現在）缺乏支持。 – 2012-07-12 12:43:49

您可以使用javascript通過添加以下這行javascript來禁用按鈕onclick事件。

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

最好的選擇可能是使用jQuery並檢查btnCopy是否有'禁用'類。

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

祝你好運！

來源

2012-07-12 13:18:59

當'disabled'被移除時，你會如何反轉'element.onclick = null;'回到原來的位置？我需要批量打開/關閉禁用類，以獲取更多元素。我不想爲單獨的行中的每個元素設置「onclick」... – 2012-07-12 13:45:22

你可以這樣做。

pointer-events: none; 
cursor: default;

更here

來源

2015-10-20 14:16:24 user2591988

當pointer-events被設置爲none時，光標被忽略 – 2017-03-09 12:28:42

這是引導如何做到這一點。

.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-09 05:32:39 Syed

使用CSS禁用onclick ::可能嗎？

回答

相關問題