Original demand: Prevent the button to trigger a click event in a short time, due to repeated submissions caused by the business exception.
Figure:
Demo
<!DOCTYPE HTML><HTMLLang= "en"dir= "ltr"> <Head> <MetaCharSet= "Utf-8"> <styleMedia= "Screen">. Forbidden Button{cursor:not-allowed; } </style> </Head> <Body> <h5>Multiple clicks in 3 seconds only take effect once (based on event interception)</h5> <Divclass= "Button-group"> <Buttonclass= "Link-button"onclick= "Randomnum ()">Random</Button>Random Number:<spanID= "Random_num"></span> </Div> </Body> <Scripttype= "Text/javascript"> /*Initialize Disable bindings*/Document.queryselector ('. Link-button'). AddEventListener ('Click', Forbiddenbutton,true); functionRandomnum () {Document.queryselector ('#random_num'). InnerHTML=Math.random (); } varForbiddentimer; functionForbiddenbutton () {varPnode= This. parentnode; PNode.classList.add ('Forbidden'); Pnode.addeventlistener ('Click',function(e) {if(Array.from ( This. Classlist). Includes ('Forbidden') ) e.stoppropagation (); _cleartimer (); },true); _cleartimer (); function_cleartimer () {/*3 seconds To cancel disable state*/ if(Forbiddentimer) cleartimeout (Forbiddentimer); Forbiddentimer=SetTimeout (function() {PNode.classList.remove ('Forbidden'); }, the); } } </Script></HTML>
AddEventListener Event Interception Reference: https://www.cnblogs.com/Andyudd/p/5583563.html
The application of JavaScript event flow AddEventListener