Mad_Griffith Posted April 21, 2016 Share Posted April 21, 2016 (edited) 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 Link to comment Share on other sites More sharing options...
Ingolme Posted April 21, 2016 Share Posted April 21, 2016 In your first code block it doesn't look like sections exists anywhere. Link to comment Share on other sites More sharing options...
Mad_Griffith Posted April 21, 2016 Author Share Posted April 21, 2016 (edited) I added it in the code above, sorry Edited April 21, 2016 by Mad_Griffith Link to comment Share on other sites More sharing options...
Ingolme Posted April 21, 2016 Share Posted April 21, 2016 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 comment Share on other sites More sharing options...
Mad_Griffith Posted April 21, 2016 Author Share Posted April 21, 2016 (edited) 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 Link to comment Share on other sites More sharing options...
davej Posted April 21, 2016 Share Posted April 21, 2016 Code errors sometime halt execution before e.preventDefault() is reached. Link to comment Share on other sites More sharing options...
Mad_Griffith Posted April 21, 2016 Author Share Posted April 21, 2016 There is nothing coming up in the console though... Link to comment Share on other sites More sharing options...
Mad_Griffith Posted April 21, 2016 Author Share Posted April 21, 2016 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! Link to comment Share on other sites More sharing options...
davej Posted April 21, 2016 Share Posted April 21, 2016 I would never try to step through a dynamic list. Link to comment Share on other sites More sharing options...
Mad_Griffith Posted April 21, 2016 Author Share Posted April 21, 2016 (edited) I see your point, what would you suggest to do instead? thank you! Edited April 21, 2016 by Mad_Griffith Link to comment Share on other sites More sharing options...
davej Posted April 21, 2016 Share Posted April 21, 2016 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 } } Link to comment Share on other sites More sharing options...
justsomeguy Posted April 21, 2016 Share Posted April 21, 2016 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 comment Share on other sites More sharing options...
Mad_Griffith Posted April 21, 2016 Author Share Posted April 21, 2016 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. Link to comment Share on other sites More sharing options...
justsomeguy Posted April 21, 2016 Share Posted April 21, 2016 OK, just keep in mind that we can only comment on the code we're looking at. Link to comment Share on other sites More sharing options...
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment
Create an account
Sign up for a new account in our community. It's easy!
Register a new accountSign in
Already have an account? Sign in here.
Sign In Now