event.stopPropagation() on menu icon click event handler

With a menu icon that displays a menu list on click and hides menu when clicked again, you don't want any other click event listeners responding to the click on the menu icon. To prevent this, you would need to add "event.stopPropagation()" to the menu icon event handler.

Definition: Prevents the event from bubbling up the DOM tree, preventing any parent handlers from being notified of the event.

 This is especially needed when you have a click event listener on the document where whenever you click anywhere outside the menu list items, the menu list would close/hide. If there was no event.stopPropagation(), when you click on the menu icon, this listener on the document would respond and hide the menu list even though you are trying to display it.

$(".menu-items").hide(); //hide menu on page load

$(".menu").click(function() {
event.stopPropagation(); //so clicking menu icon does not trigger event listener on document to hide menu
if( $(".menu-items").is(":hidden") ) {
$(".menu-items").slideDown("500");
}
else if( $(".menu-items").is(":visible") ) {
$(".menu-items").slideUp("500");
}
});

//clicking anywhere outside list items would close the menu list
$(document).click(function(event) {
if( !$(event.target).closest(".menu-items li").length ) {
if( $(".menu-items").is(":visible") ) {
$(".menu-items").slideUp("500");
}
}
})

Comments

Post a Comment

Popular posts from this blog

Code Wars: Data Reverse (6 kyu)

Link to code challenge Code efficiency: Loops through string once (from the end) and with one new variable. String splicing- consider its efficiency? Try not to manipulate data when looping for efficiency. function dataReverse(data) { let arr = []; while (data.length) { arr.push(...data.splice(data.length - 8, data.length)); } return arr; }
Read more

Code Wars: longest_palindrome (6 kyu)

Link to code challenge Find the length of the longest substring in the given string s that is the same in reverse. As an example, if the input was “I like racecars that go fast”, the substring (racecar) length would be 7. If the length of the input string is 0, the return value must be 0. //Loop thru string and find longest substring that is also a palindrome //Efficiency- start with longest length first (each "outer" loop still looping to shorter //strings but done prior to "inner" loops which have longer strings- can be more efficient?) longestPalindrome=function(s){ if (s === "") return 0; else if (s.length === 1) return 1; let mainPointer = s.length; let subPointer = 0; let largest = 0; while (subPointer = 0) { //refactored- instead of pushing to new array let newString = s.slice(subPointer, mainPointer); //can this be refactored by comparing the two endpoints of the string but longer code? if ( newStr...
Read more

Code Wars: Find the odd int

https://www.codewars.com/kata/54da5a58ea159efa38000836/train/javascript Given an array, find the int that appears an odd number of times. There will always be only one integer that appears an odd number of times. function findOdd(A) {   let arr = A.sort((a,b) => a - b);   let counter = 1;     if (arr.length === 1) return arr[0];     for (let i = 0; i < arr.length - 1; i++) {         if (arr[i] === arr[i + 1]) {       counter++;     }     else if (arr[i] !== arr[i + 1]) {             if (counter % 2 !== 0) {         return arr[i];       }       // if it turns out to be last number in array with a count of 1 (since for loop doesnt get to it)       else if (i + 1 === arr.length - 1) {         return arr[i + 1];       }       count...
Read more