eqcss / eqcss

EQCSS is a CSS Reprocessor that introduces Element Queries, Scoped CSS, a Parent selector, and responsive JavaScript to all browsers IE8 and up

Home Page:https://elementqueries.com

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

Mouse listeners firing after right-click > inspect

matthewjumpsoffbuildings opened this issue · comments

In Chrome at least, if I right click on an element that has an EQCSS query attached to it, then select "Inspect" from the menu, from then on when I move my mouse around anywhere on the DOM, the EQCSS listener seems to get called constantly.

it happens on the codepens too - eg i forked one of your pens here https://codepen.io/matthew-prasinov/pen/xqyjqd and added a console.log('mouse')

if you right click > Inspect on one of the "mmmmmm" headers and then move your mouse around, do you see tons of console logs appearing?

actually if you right click, then move off the element entirely and click to close the menu, the same thing happens - unless you terminate the menu with the mouse still over the element in question you seem to get constant EQCSS activity on all mouse moves subsequently

It's not just EQCSS, unless there's some kind of event that we could use when the context menu closes this is something that happens with all JavaScript. Consider this demo:

<script>
  function menuDisplayed() {
    console.log('menu displayed')
  }
  document.addEventListener('contextmenu', menuDisplayed)

  function menuHidden() {
    console.log('menu hidden')
  }
  window.addEventListener('blur', menuHidden)
  document.addEventListener('click', menuHidden)
</script>

You can detect when it opens, and you can attempt to cancel it when you do things like click on the document again, or leave the window - however dismissing the menu with the keyboard, or selecting items like 'Inspect Element' aren't detectable, so I'm not sure this is something we can work around.

Have you seen any other JS plugins work around the context menu being open and closed this way?

I wonder though if it's enough to try to sniff if it's a left click. Does this solve the issue for you, if the mousedown event listener is wrapped in if (e.which == 1) {} for detecting only left clicks?

window.addEventListener("mousedown", function(e) {

  if (e.which == 1) {
    EQCSS_mouse_down = true;
  }

});

This would avoid the context menu open and closing entirely if it works

yes, that seems to fix it - is there any downside to doing that?

commented

imo it's fine ;)

Happy to report that as of EQCSS v1.6.0 this should be fixed now :D Thanks for the idea!