Question

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

该页面可在此处找到：

www.eyeconic.tv/ky-ffa/

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

<h2 class=".stack-title">

//堆栈处于活动状态后，您应该可以通过单击用于在其下方创建缩略图的第一个.stack项来激活完整视图。整个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();

})();

Answer 1

我将标题和第一个堆栈项包装在div类中.touch-me并且工作得相当好。我以前试过这样做并收到错误。但我可能输错了一些东西，因为它才有意义。

问题：它适用于鼠标点击，但它不适用于触摸Windows。我在任何其他环境中都未经测试，因为它将部署在Windows触摸屏上。

虽然我无法告诉图层在您滑动或触摸堆栈的标题图像时不要触摸....我担心我没有技能组来正确修改javascript中的逻辑我不完全理解正在使用的插件。

将Touch EventListener扩展到其他DOM元素

1 个答案: