CSS 加 click 事件

CSS 是樣式表語言，用于描述網頁的外觀和布局。它可以使網頁看起來更好看，更有吸引力。與 JavaScript 結合使用，可以使網頁更具互動性。在 CSS 中加入 click 事件，可以使網頁元素在被點擊后觸發相應的動作。

/* CSS 代碼 */
.button {
background-color: red;
color: white;
padding: 10px;
cursor: pointer;
}
/* JavaScript 代碼 */
document.querySelector(".button").addEventListener("click", function() {
alert("你點擊了按鈕！");
});

在上面的代碼中，用 CSS 創建了一個按鈕樣式，由紅色背景和白色字體組成。用JavaScript 添加了 click 事件，當按鈕被點擊后，會彈出一個警告框，顯示“你點擊了按鈕！”的信息。

需要注意的是，CSS 不會操作 HTML 的結構或屬性，而只是改變文本的樣式和布局，所以在實現 click 事件時還需借助 JavaScript。此外，為了防止按鈕被多次點擊，應該在事件處理程序內禁用按鈕，或者使用 setTimeout 函數來延遲點擊事件。

// 禁用按鈕
document.querySelector(".button").addEventListener("click", function() {
this.disabled = true;
alert("你點擊了按鈕！");
});
// 延遲點擊事件
document.querySelector(".button").addEventListener("click", function() {
setTimeout(function() {
alert("你點擊了按鈕！");
}, 1000);
});

如此一來，就可以在 CSS 中添加 click 事件，使網頁變得更加豐富和動態。