CSS Property Pointer-events

The CSS property pointer-events could control mouse/touch event fired or not. The default value is auto and you can set none to disable event firing. For example:
You have a Sign-in button.

HTML file
1
2
3

<div>
  <div id="signin" class="signin-btn">Signin</div>
</div>

The traditional way to prevent user clicks multiple times.

JS
1
2
3
4
5
6

$('#signin').on('click', function(event){
  if (is_signin_process) {
    return; //prevent multiple click during signin flow.
  }
  //doing signin flow
});

Now you could just add a processing className to prevent multiple click events. No more click event firing after set pointer-events: none;

CSS file
1
2
3

.signin-btn.processing {
  pointer-events: none;
}
JS
1
2
3
4

$('#signin').on('click', function(event){
  $('#signin').addClass('processing');
  //doing signin flow
});
css
Comments

Comments