Question

我正在使用http://tympanus.net/Development/MorphingSearch/处找到的代码段，在点击时放大搜索框。

<script>
        (function() {
            var morphSearch = document.getElementById( 'morphsearch' ),
                searchlink = document.getElementById( 'mybtn' ),
                input = morphSearch.querySelector( 'input.morphsearch-input' ),
                ctrlClose = morphSearch.querySelector( 'span.morphsearch-close' ),
                isOpen = isAnimating = false,
                // show/hide search area
                toggleSearch = function(evt) {

                    // return if open and the input gets focused
                    if( evt.type.toLowerCase() === 'focus' && isOpen ) return false;

                    if( isOpen ) {
                        classie.remove( morphSearch, 'open' );

                        // trick to hide input text once the search overlay closes 
                        // todo: hardcoded times, should be done after transition ends
                        if( input.value !== '' ) {
                            setTimeout(function() {
                                classie.add( morphSearch, 'hideInput' );
                                setTimeout(function() {
                                    classie.remove( morphSearch, 'hideInput' );
                                    input.value = '';
                                }, 300 );
                            }, 500);
                        }

                        input.blur();
                    }
                    else {
                        classie.add( morphSearch, 'open' );
                    }
                    isOpen = !isOpen;
                };

            // events
            searchlink.addEventListener( 'click', toggleSearch );
            ctrlClose.addEventListener( 'click', toggleSearch );
            // esc key closes search overlay
            // keyboard navigation events
            document.addEventListener( 'keydown', function( ev ) {
                var keyCode = ev.keyCode || ev.which;
                if( keyCode === 27 && isOpen ) {
                    toggleSearch(ev);
                }
            } );


            /***** for demo purposes only: don't allow to submit the form *****/
            morphSearch.querySelector( 'button[type="submit"]' ).addEventListener( 'click', function(ev) { ev.preventDefault(); } );
        })();
    </script>

一切正常，但由于搜索框位于固定标题中，因此当点击链接时，页面内容会跳转到顶部。

以前发生这种情况时，我已插入以下内容......

   event.preventDefault();

我无法解决在此代码中插入此内容的问题，任何人都可以帮忙吗？

Answer 1

将其插入由click事件处理程序

调用的函数中

toggleSearch = function(evt) {

    if (evt.type === 'click') {

        evt.preventDefault();

    }

    // rest of code

}

searchlink.addEventListener( 'click', toggleSearch );
ctrlClose.addEventListener( 'click', toggleSearch );

注意条件，确保在keydown处理程序调用相同函数时不会阻止默认操作

在jquery代码中插入preventDefault的位置

1 个答案: