2

Next code logs the fired events on window object (FIDDLE):

var logEvent = (function() {
var count = 1,
    timer = 0,
    buffer = function() {
        clearTimeout(timer)
        timer = setTimeout(function() {
            count++
        }, 30)
    }
return function(type, e) {
    buffer();
    console.log(count + '. ------- ' + type + ' ------')
    console.log('type:   ' + e.type)
    console.log('button: ' + e.button)
    console.log('detail: ' + e.detail)
}
})()
window.addEventListener('click', function(e) {
logEvent('CLICK', e)
})
window.addEventListener('contextmenu', function(e) {
logEvent('CONTEXTMENU', e)
})
<body>
<div>
    Click here
</div>
</body>
If I right click on the body element for example, I'll get next log on console:

for Firefox 54.0.1 

  1. ------- CLICK ------
  type:   click
  button: 2
  detail: 1
  1. ------- CONTEXTMENU ------
  type:   contextmenu
  button: 2
  detail: 1

for Chrome 62.0.3165.0

  1. ------- CONTEXTMENU ------
  type:   contextmenu
  button: 2
  detail: 0

I don't know what's going on with Firefox, maybe browsers or operational systems configuration configured improperly. Did you have same problems, how can I fix it?

Dij
  • 9,761
  • 4
  • 18
  • 35
Makha
  • 317
  • 3
  • 16

1 Answers1

3

It happens on my firefox too.

It's a registered bug, see https://bugzilla.mozilla.org/show_bug.cgi?id=184051

You can go around it by checking e.button value in the click handler.

window.addEventListener('click', function(e) {
    //when e.button==2, it's a right click, when 0, it's a left click
    logEvent('CLICK.' + e.button, e);
    if(e.button===2){
        //do context menu stuff
    }
})
Anuraag Vaidya
  • 827
  • 9
  • 16
  • 2
    On console we can see that in both _click_ and _contextmenu_ event objects _button_ property equals to 2. So I am checking the type of event with _event.type_ property. But thank you for your advice. – Makha Aug 09 '17 at 07:39