css怎么設置按鈕不能點擊?下面本篇文章就來給大家介紹一下使用CSS設置按鈕不能點擊的方法。有一定的參考價值,有需要的朋友可以參考一下,希望對大家有所幫助。
想要按鈕不能點擊可以通過設置按鈕點擊事件失效來實現;而在CSS中,可以使用pointer-events屬性來實現點擊事件失效。
pointer-events屬性除了指示該元素不是鼠標事件的目標之外,值none表示鼠標事件“穿透”該元素并且指定該元素“下面”的任何東西。實現按鈕上的點擊事件失效。
語法:pointer-events:auto| none | visiblepainted | visiblefill | visiblestroke |
visible | painted | fill | stroke | all
默認值:auto
適用于:所有元素
繼承性:有
動畫性:否
計算值:指定值
取值:auto:與pointer-events屬性未指定時的表現效果相同,對于SVG內容,該值與visiblePainted效果相同
none:元素永遠不會成為鼠標事件的target。但是,當其后代元素的pointer-events屬性指定其他值時,鼠標事件可以指向后代元素,在這種情況下,鼠標事件將在捕獲或冒泡階段觸發父元素的事件偵聽器。
visiblePainted:只適用于SVG。元素只有在以下情況才會成為鼠標事件的目標:visibility屬性值為visible,且鼠標指針在元素內部,且fill屬性指定了none之外的值;visibility屬性值為visible,鼠標指針在元素邊界上,且stroke屬性指定了none之外的值
visibleFill:只適用于SVG。只有在元素visibility屬性值為visible,且鼠標指針在元素內部時,元素才會成為鼠標事件的目標,fill屬性的值不影響事件處理。
visibleStroke
只適用于SVG。只有在元素visibility屬性值為visible,且鼠標指針在元素邊界時,元素才會成為鼠標事件的目標,stroke屬性的值不影響事件處理。
visible
只適用于SVG。只有在元素visibility屬性值為visible,且鼠標指針在元素內部或邊界時,元素才會成為鼠標事件的目標,fill和stroke屬性的值不影響事件處理。
說明:
設置或檢索在何時成為屬性事件的target。使用pointer-events來阻止元素成為鼠標事件目標不一定意味著元素上的事件偵聽器永不會觸發。如果元素后代明確指定了pointer-events屬性并允許其成為鼠標事件的目標,那么指向該元素的任何事件在事件傳播過程中都將通過父元素,并以適當的方式觸發其上的事件偵聽器。當然位于屏幕上在父元素上但不在后代元素上的鼠標活動都不會被父元素和后代元素捕獲(將會穿過父元素而指向位于其下面的元素)。
對應的腳本特性為pointerEvents。
示例:
a{pointer-events: none;}
HTML中文網
更多前端開發知識,請查閱 HTML中文網 !!