Event delegation: returning false not working in for loop

[Mad_Griffith]

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 April 21, 2016 by Mad_Griffith

[Ingolme]

In your first code block it doesn't look like sections exists anywhere.

[Mad_Griffith]

I added it in the code above, sorry

Edited April 21, 2016 by Mad_Griffith

[Ingolme]

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.

[Mad_Griffith]

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 April 21, 2016 by Mad_Griffith

[davej]

Code errors sometime halt execution before e.preventDefault() is reached.

[Mad_Griffith]

There is nothing coming up in the console though...

[Mad_Griffith]

Ok, I achieved something by creating a separate loop and adding it before the one shown in the code above:

 

  for (var i = 0; i < querySelectorAll('.tooltip').length; i++) {
    if (querySelectorAll('.tooltip')[i].contains(target)) {


      return false;


    }
  }

Now return false works for both!

[davej]

I would never try to step through a dynamic list.

[Mad_Griffith]

I see your point, what would you suggest to do instead?

 

thank you!

Edited April 21, 2016 by Mad_Griffith

[davej]

Make a copy and step through the copy.

var lst = document.blahblah
var len = lst.length;
for(var i=0 ; i<len ; i++){
  if(lst[i] == ???){
    // etc
  }

}

[justsomeguy]

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.

[Mad_Griffith]

Hey guys thanks a lot. As I was saying above, I am saving the values in variables, but for the purpose of letting you understand what I was doing in a shorter way, I omitted all the variables.

[justsomeguy]

OK, just keep in mind that we can only comment on the code we're looking at.