Make it work only with left mouse down

Question

Holla ,

this is the javascript im using

var timeoutID;

    function setup() {


            document.getElementById("demo").addEventListener("mousedown", resetTimer);


        startTimer();
    }
    setup();

    function startTimer() {

        timeoutID = window.setTimeout(goInactive, 1000);
    }

    function resetTimer() {
        window.clearTimeout(timeoutID);
        goActive();
    }

    function goInactive() {
        document.getElementById("demo").style.opacity = 0;
        document.getElementById("demo").style.transition = "1s";
    }

    function goActive() {
        document.getElementById("demo").style.opacity = 1;
        document.getElementById("demo").style.transition = "1s";

        startTimer();
    }

everything is working fine , except i want it to go active only by left mouse button ( now right click left click and middle click are doing the job )

So many thanks in advance AliYous

score 3 · Accepted Answer · answered May 15 '18 at 08:26

3

You have to detect the left mouse button press by checking the event object (Detect left mouse button press).

evt = evt || window.event;
if ("buttons" in evt) {
    return evt.buttons == 1;
}

And then if it's left mouse (1), proceed to do your job in resetTimer() function. Final code will be:

function resetTimer(e) {
    evt = e || window.event;
    if ("buttons" in evt) {
        if (evt.buttons == 1) {
            window.clearTimeout(timeoutID);
            goActive();
        }
    }
}

answered May 15 '18 at 08:26

Praveen Kumar Purushothaman

164,888
24
203
252

Hey mate , i tried your code with no luck , still working with all mouse buttons . maybe i should put the if inside the setup() function ? – May 15 '18 at 08:35
@aliyousefi Did you check the updated answer with `if` blocks? – Praveen Kumar Purushothaman May 15 '18 at 08:35

score 1 · Answer 2 · edited May 15 '18 at 08:37

You can use the mouseup event on the element you want to use as the trigger. You haven't said what you click so I used document in the example below.

The below example is taken pretty much straight from the Mouse Event Button Documentation

document.addEventListener('mouseup', function(e) {
  var e = e || window.event;
  var btnCode;
  
  btnCode = e.button;

  switch (btnCode) {
    case 0:
      console.log('Left button clicked.');
      break;

    case 1:
      console.log('Middle button clicked.');
      break;

    case 2:
      console.log('Right button clicked.');
      break;

    default:
      console.log('Unexpected code: ' + btnCode);
  }
})

The short version more applicable to your scenario could look like the blow:

var resetTimer = function() {
  console.log('resetTimer called');
};

document.addEventListener('mouseup', function(e) {
  var e = e || window.event;
  var btnCode;

  btnCode = e.button;

  if (btnCode === 0) {
    resetTimer();
  }
})

Make it work only with left mouse down

2 Answers2