用純CSS實現(xiàn)禁止鼠標點擊事件示例代碼

JavaScript有一個preventDefault方法, 他可用以來取消事件的默認動作。比如取消打開鏈接,選擇文本或拖放等。
event.preventDefault()
該方法將通知 Web 瀏覽器不要執(zhí)行與事件關(guān)聯(lián)的默認動作(如果存在這樣的動作)。例如,如果 type 屬性是 “submit”,在事件傳播的任意階段可以調(diào)用任意的事件句柄,通過調(diào)用該方法,可以阻止提交表單。注意,如果 Event 對象的 cancelable 屬性是 fasle,那么就沒有默認動作,或者不能阻止默認動作。無論哪種情況,調(diào)用該方法都沒有作用。
這種方法可以阻止當前元素的瀏覽器默認行為,但并不阻止事件被父級及document響應(yīng)。如果想徹底取消事件,則可使用stopPropagation
event.stopPropagation()
該方法將停止事件的傳播,阻止它被分派到其他 Document 節(jié)點。在事件傳播的任何階段都可以調(diào)用它。注意,雖然該方法不能阻止同一個 Document 節(jié)點上的其他事件句柄被調(diào)用,但是它可以阻止把事件分派到其他節(jié)點。
這兩種是在JS中的常用取消事件的方法,但是其實還有一種用純css就能實現(xiàn)取消事件響應(yīng)的方法,pointer-events,使用起來更加簡單,它可以:
1、阻止用戶的點擊動作產(chǎn)生任何效果
2、阻止缺省鼠標指針的顯示
3、阻止CSS里的hover和active狀態(tài)的變化觸發(fā)事件
4、阻止JavaScript點擊動作觸發(fā)的事件
比如以下CSS就順起到將禁用的按鈕灰掉的效果
.disabled {
pointer-events: none;
cursor: default;
opacity: 0.6;
}
這種方法明顯比js代碼更加靈活,可惜ie9不支持。以上就是本文的全部內(nèi)容,希望對大家的學(xué)習和工作能有所幫助。
相關(guān)文章
- 這是一個CSS3實現(xiàn)鼠標hover圖片光芒四射的動畫特效,通過對偽元素添加漸變和clip-path,來制作光芒四射的效果,炫酷實用2018-06-27
- 這是一款使用CSS3和少量js代碼制作的帶炫酷鼠標滑過效果的多列布局效果的代碼,點擊縮略圖時可將它全屏展開2016-07-19
- 本源碼是一組使用CSS3制作的超酷鼠標滑過圖片標題動畫特效的代碼。共有8種不同的鼠標滑過效果,能制作遮罩層的各種動畫特效2016-07-18
- 本源碼是一組效果非??岬氖髽嘶^按鈕背景動畫特效的代碼。當鼠標滑過按鈕時,會產(chǎn)生不同背景效果2016-04-14
- 本特效源碼是一組使用純CSS3制作的效果很酷的鼠標滑過彩色按鈕動畫特效的代碼,有9種效果,推薦大家下載試試2016-04-01
- 這篇文章主要介紹了使用css屬性屏蔽鼠標事件(鼠標點擊可穿透上層元素)的相關(guān)知識,本文通過截圖實例代碼相結(jié)合給大家介紹的非常詳細,對大家的學(xué)習或工作具有一定的參考借2020-04-03