将Touch EventListener扩展到其他DOM元素

问题描述

我使用了Codrops的文章/实验，为本地团体创建了一个交互式环境，供他们在会议中使用。 问题是默认的交互不是很直观。 该模板使用Flickity.js和看起来像classie.js的方式创建了我遇到麻烦的滑动界面。

该页面可以在这里找到：

问题：激活全屏视图的唯一方法是单击html元素：

<h2 class=".stack-title">

//激活堆栈后，您应该能够通过单击用于在其下方创建缩略图的第一个.stack-item激活完整视图。 整个div应该是可点击的。 用户正在触摸屏幕上的所有位置，而没有实际单击所需操作的标题。 我希望这是有道理的。

换句话说，您应该能够单击堆栈标题和每个堆栈标题下方的图像，以将堆栈拉到屏幕上的全视图模式。 然后单击x或屏幕上的其他任何位置以关闭全视图。

以下内容位于main.js和我发现的创建我所引用事件的参考中。

//
function initEvents() {
        stacks.forEach(function(stack) {
            var titleEl = stack.querySelector('.stack-title');

            // expand/close the stack
            titleEl.addEventListener('click', function(ev) {
                ev.preventDefault();
                if( classie.has(stack, 'is-selected') ) { // current stack
                    if( classie.has(bodyEl, 'view-full') ) { // stack is opened
                        var closeStack = function() {
                            classie.remove(bodyEl, 'move-items');

                            onEndTransition(slider, function() {
                                classie.remove(bodyEl, 'view-full');
                                bodyEl.style.height = '';
                                flkty.bindDrag();
                                flkty.options.accessibility = true;
                                canMoveHeroImage = true;
                            });
                        };

                        // if the user scrolled down, let's first scroll all up before closing the stack.
                        var scrolled = scrollY();
                        if( scrolled > 0 ) {
                            smooth_scroll_to(isFirefox ? docElem : bodyEl || docElem, 0, 500).then(function() {
                                closeStack();
                            });
                        }
                        else {
                            closeStack();
                        }
                    }
                    else if( canOpen ) { // stack is closed
                        canMoveHeroImage = false;
                        classie.add(bodyEl, 'view-full');
                        setTimeout(function() { classie.add(bodyEl, 'move-items'); }, 25);
                        bodyEl.style.height = stack.offsetHeight + 'px';
                        flkty.unbindDrag();
                        flkty.options.accessibility = false;
                    }
                }
                else if( classie.has(stack, 'stack-prev') ) {
                    flkty.previous(true);
                }
                else if( classie.has(stack, 'stack-next') ) {
                    flkty.next(true);
                }
            });

            titleEl.addEventListener('mouseenter', function(ev) {
                if( classie.has(stack, 'is-selected') ) {
                    canMoveHeroImage = false;
                    imghero.style.WebkitTransform = 'perspective(1000px) translate3d(0,0,0) rotate3d(1,1,1,0deg)';
                    imghero.style.transform = 'perspective(1000px) translate3d(0,0,0) rotate3d(1,1,1,0deg)';
                }
            });

            titleEl.addEventListener('mouseleave', function(ev) {
                // if current stack and it's not opened..
                if( classie.has(stack, 'is-selected') && !classie.has(bodyEl, 'view-full') ) {
                    canMoveHeroImage = true;
                }
            });
        });

        window.addEventListener('mousemove', throttle(function(ev) {
            if( !canMoveHeroImage ) return false;
            var xVal = -1/(win.height/2)*ev.clientY + 1,
                yVal = 1/(win.width/2)*ev.clientX - 1,
                transX = 20/(win.width)*ev.clientX - 10,
                transY = 20/(win.height)*ev.clientY - 10,
                transZ = 100/(win.height)*ev.clientY - 50;

            imghero.style.WebkitTransform = 'perspective(1000px) translate3d(' + transX + 'px,' + transY + 'px,' + transZ + 'px) rotate3d(' + xVal + ',' + yVal + ',0,2deg)';
            imghero.style.transform = 'perspective(1000px) translate3d(' + transX + 'px,' + transY + 'px,' + transZ + 'px) rotate3d(' + xVal + ',' + yVal + ',0,2deg)';
        }, 100));

        // window resize
        window.addEventListener( 'resize', throttle(function(ev) {
            // recalculate window width/height
            win = { width: window.innerWidth, height: window.innerHeight };
            // reset body height if stack is opened
            if( classie.has(bodyEl, 'view-full') ) { // stack is opened
                bodyEl.style.height = stacks[flkty.selectedIndex].offsetHeight + 'px';
            }
        }, 50));

        // Flickity events:
        flkty.on('cellSelect', function() {
            canOpen = false;
            classie.remove(bodyEl, 'item-clickable');

            var prevStack = stacksWrapper.querySelector('.stack-prev'),
                nextStack = stacksWrapper.querySelector('.stack-next'),
                selidx = flkty.selectedIndex,
                cellsCount = flkty.cells.length,
                previdx = selidx > 0 ? selidx - 1 : cellsCount - 1;
                nextidx = selidx < cellsCount - 1 ? selidx + 1 : 0;

            if( prevStack ) {
                classie.remove(prevStack, 'stack-prev');
            }
            if( nextStack ) {
                classie.remove(nextStack, 'stack-next');    
            }

            classie.add(stacks[previdx], 'stack-prev');
            classie.add(stacks[nextidx], 'stack-next');

        });

        flkty.on('dragStart', function() {
            canOpen = false; 
            classie.remove(bodyEl, 'item-clickable');
        });

        flkty.on('settle', function() { 
            classie.add(bodyEl, 'item-clickable');
            canOpen = true; 
        });
    }

    init();

})();