Jump to content

Event delegation: returning false not working in for loop


Recommended Posts

I am trying to stop a mousewheel event from occurring when mousewheeling on a tooltip.

 

Why something like this doesn't work (it only works on the first of the tooltips)...

document.body.onwheel = function(e) {

  e = e || window.event;
  var target = e.target || e.srcElement;

  for (var i = 0; i < document.querySelectorAll('.searchPageSections').length; i++) {

    if (document.querySelectorAll('.tooltip')[i].contains(target)) {

      return false

    }

// perform some stuff

  }

};
But this does?
document.body.onwheel = function(e) {

  e = e || window.event;
  var target = e.target || e.srcElement;

 if (document.querySelectorAll('.tooltip')[0].contains(target) || document.querySelectorAll('.tooltip')[1].contains(target)) {

  return false

 }

  for (var i = 0; i < document.querySelectorAll('.searchPageSections').length; i++) {

   // perform some stuff

  }

};

Please note I am using return false because e.preventDefault() doesn't seem to work at all either!

Edited by Mad_Griffith
Link to post
Share on other sites

I don't understand the logic of that code. You're counting the amount of searchPageSections elements, but then modifying that number of tooltip elements.

 

Have you checked the javascript console for errors?

 

It would be more efficient to store the result of querySelectorAll() in a variable before using it.

Link to post
Share on other sites

Yes I am storing both in their own variable. I omitted the variables to shorten the code (thus explained the fact I left the "section" variable by mistake).

 

The logic is I am manipulating the sections' CSS in the for loop (this part is in the code where // perform some stuff is, but again I omitted it to ease the reading) when the mouse wheel is used. But this manipulation shouldn't happen when I am mousewheeling on any of the tooltips (which happen to come in the same amount as the sections - could it be my mistake is actually here? using the same for loop for the sections and for the tooltips, even though all the tooltips belong to only one of the sections).

 

No errors in JS!

 

I've been running these tests:

 

    console.log('Tooltip ', querySelectorAll('.tooltip')[i], 'and target ', target)
    console.log('Tooltip contains target?', querySelectorAll('.tooltip')[i].contains(target));
    console.log("Was preventDefault() called: " + e.defaultPrevented);
And the second tooltip (the one that doesn't work) returns the same values as the first tooltip (that works correctly)
Edited by Mad_Griffith
Link to post
Share on other sites

Unless you have a complex selector that you didn't show, you can make that code more efficient by using getElementsByClassName and only calling it once:

 

var els = document.getElementsByClassName('tooltip');
for (var i = 0; i < els.length; i++) {
  if (els[i].contains(target) {
    return false;
  }
}
That will be fine if you're not changing the list of elements inside the loop.
Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...
×
×
  • Create New...