URL: http://www.danielhopwood.com/
Browser / Version: Firefox 48.0
Operating System: Windows 7
Problem type: Something else - I'll add details below

Steps to Reproduce

1. Navigate to: http://www.danielhopwood.com/
2. Let the page load completely
3. Scroll to the PROJECTS section and click on a photo to open a gallery
4. Once gallery is open, try to navigate to the next photo in the slide by clicking on the left or right sides (the mouse cursor turns into an arrow), OR
5. Click any whitespace around the edge of the screen

Expected Behavior:
Navigating the gallery as described in step 4 should allow you to scroll between photos. Attempting to close the gallery as described in step 5 should close the gallery.

Actual Behavior:
Actions in step 4 and 5 do not work; user cannot make the gallery go away, and clicking on dots to navigate also does not work after either 4 or 5 has been attempted.

Note that if you try to open a gallery before the page has finished loading, it'll take you to a separate URL to display the gallery (I assume because the JS has not finished processing and doing preventDefault() where necessary), where everything seems to work fine.

It looks like what's happening is that there's a JavaScript error being thrown if you try either 4 or 5 that breaks the rest of the site's JavaScript functionality:

TypeError: Not enough arguments to EventTarget.removeEventListener. (1139:4)

The offending lines 1139-1146 in the site's non-mobile.js:

document.getElementById('project_carousel_container').removeEventListener("touchstart");
document.getElementById('project_carousel_container').removeEventListener("touchmove");
document.getElementById('project_carousel_container').removeEventListener("touchend");
// document.getElementById('home').removeEventListener("touchstart");

document.getElementById('lightbox').removeEventListener("touchstart");
document.getElementById('banner_nav').removeEventListener("touchstart");
document.getElementById('project_carousel_nav').removeEventListener("touchstart");

Lines 969-972 and 1069-1075 in the same file appear to be where the event handlers are attached in the first place. Some of the event handling functions are passed by reference (mf.projectImages.touchStart on line 1070 for example), while others are anonymous functions. From what I understand, if the anonymous functions are replaced by references and then all the proper references are passed in as the second argument for the removeEventListener calls, the error should be taken care of? But I have not yet tested it with those changes made.

I cannot reproduce the bug on Chrome 52 in Windows 7. I thought at first maybe it was a Firefox bug, but the docs on MDN (https://developer.mozilla.org/en-US/docs/Web/API/EventTarget/removeEventListener) make it appear that the second argument in removeEventListener is indeed mandatory, but Chrome doesn't seem to mind.

From webcompat.com with ❤️