How to disable actions on a webpage for first mouse click using javascript?

Question

On clicking any element on a web page (say links, button etc), I need to stop the action. However, if the user clicks on them again (on second click), the actions should happen and it should redirect to next page. I have this code to stop the action:

event.preventDefault();
event.stopPropagation();

I need to write condition to check for mouse clicks. Please help.

UPDATE 1:

var count=0;
var elements = document.querySelectorAll("*");
for (var i = 0; i < elements.length; i++) {
elements[i].addEventListener("click", nonJQuery, false);


var nonJQuery = function (event) {
//some code
count++;
if(count<2){
    event.preventDefault();
    event.stopPropagation();
}
//some code
}

Thanks for the help. I'm writing something like this. I need to stop execution on all the elements on the web page and not on a particular element. So, my code looks like this. If count is declared globally, and it is incremented in the function, next element I click will have wrong value. Can someone correct me? PS: Same if I use boolean as well.

Answer 1

Use counter for each element. You can use data attribute to store counter on the element itself.

$('mySelector').on('click', function(e) {
    // Get counter of this element
    var counter = parseInt($(this).data('clickCount'), 10) || 0;

    if (counter++ % 2 === 0) {
        // 
    } else {
        e.preventDefault();
        e.stopPropagation();
    }
    $(this).data('clickCount', counter);
});

EDIT

Without jQuery :

data docs

element.addEventListener('click', function (e) {
    // Get counter of this element
    var counter = parseInt((this.dataset.counter), 10) || 0;

    if (counter++ % 2 === 0) {
        // 
    } else {
        return false;
    }
    this.dataset.counter = counter;
});

Answer 2

You can keep a counter and increase it at every click. The counter can be item specific or global depending on your requirement. Then you can check the counter value and have the conditional logic.

Answer 3

You can do like this:

var inc = 0;
element.addEventListener('click',function(event){
  inc++;
  if(inc < 2){
   event.preventDefault();
  }
});

Answer 4

Use a boolean variable. Do:

var check= true;
element.addEventListener('click',function(event){
  if(check){
   check= false;
   event.preventDefault();
   event.stopPropagation();
  }else{// do your task

}
});

Answer 5

http://jsfiddle.net/turutosiya/kLausy7x/1/

<ul>
    <li><a href="https://stackoverflow.com/" target="_blank">Click Here 1</a></li>
    <li><a href="https://stackoverflow.com/" target="_blank">Click Here 2</a></li>    
    <li><a href="https://stackoverflow.com/" target="_blank">Click Here 3</a></li>
    <li><a href="https://stackoverflow.com/" target="_blank">Click Here 4</a></li>
</ul>

(function(){
    $(function(){
        $('a').on('click', function(event){
            if(!$(this).data('clicked')) {
                $(this).data('clicked', true);
                return false;
            } else {
                return true;
            }
        });   
    });
})();