Question

在这个网站中，我使用Fancybox 2来触发显示一些内容的弹出窗口：http://www.basing.nl/demo/cole/index.html

在顶部菜单中点击“Ontdekken”，然后点击“文件夹”。

问题

弹出窗口会打开，但窗口会滚动到页面顶部。

原因

我认为这是因为标签没有使用preventDefault（）操作来保持浏览器执行默认操作。

JS：

var coleApp = (function(){

    //global variables
    var animationArray = []
    var currentPosition
    var i = 0
    var windowWidth


    // public functions
    return {

        //end the animation? 1 = yes
        endAnimation:0,
        test: animationArray,

        fullscreen: function(callback){

            var screenHeight = window.innerHeight
            screenHeight = screenHeight - 96
            $(".fullscreen").css("height", screenHeight)

            //not needed anymore for some reason...?
            if(callback){

                setTimeout(callback, 1000)

            }

        },

        setWindowWidth: function(){

            windowWidth = window.innerWidth
            console.log(windowWidth)

        },

        initialise:function(){

            $(document).foundation();
            $('img[usemap]').rwdImageMaps();
            $('.fancybox').fancybox();
            $(".fancybox").click(function(e){

                e.preventDefault();

            })

        },

        ontdekkenGallery:function(){

            $("#ontdekkenGallery").click(function() {
                $.fancybox.open([
                    {
                        href : 'cssObjects/assets/img/figureCole.jpg',
                        title : 'jow'
                    }, {
                        href : 'cssObjects/assets/img/figureCole.jpg',
                        title : '2nd title'
                    }, {
                        href : 'cssObjects/assets/img/figureCole.jpg'
                    }
                ]);
            });

        },

        addAnimationClass:function(){

            currentPosition = window.pageYOffset
            var windowHeightHalf = Math.round(window.innerHeight / 2)

            if(i < animationArray.length && animationArray[i].executed == 0){

                if(currentPosition > (animationArray[i].position - windowHeightHalf)){

                    $(animationArray[i].element).addClass("activateAnimation")
                    animationArray[i].executed = 1
                    i = i+1
                }

            } else {this.endAnimation = 1}

        },


        getAnimationTriggers:function(){

            var animationTriggers = $(".animationTrigger")
            var animationElement
            var animationElementPosition

            var toBeSaved = {}

            for(var i = 0; i < animationTriggers.length; i++){

                animationElement = $(animationTriggers[i])
                animationElementPosition  = Math.round(animationElement[0].offsetTop)
                animationID = animationElement[0].id

                //save element properties
                toBeSaved.element = animationElement
                toBeSaved.position = animationElementPosition
                toBeSaved.executed = 0
                toBeSaved.id = animationID

                animationArray.push(toBeSaved)

                toBeSaved = {}

            }

        },

        setEventsOnMenu:function(){

            for(var i = 0; i < animationArray.length; i++){

                var menuElement = animationArray[i].id
                var panelPosition = animationArray[i].position

                scrollToEvent(panelPosition)

            }

            function scrollToEvent(panelPosition){

                var x = $("." + menuElement);

                $("." + menuElement).click(function(e){

                    $(".off-canvas-list li").removeClass("active")
                    $(this).parent().addClass("active")

                    e.preventDefault
                    if(windowWidth > 1024){

                        $('html, body').animate({scrollTop: panelPosition - 96}, 600);

                    } else {

                        $('html, body').animate({scrollTop: panelPosition}, 600);

                    }

                })

            }

        }

    }

})()

//events
$(function() {

    //on app initialisation
    coleApp.initialise()
    coleApp.fullscreen()
    coleApp.setWindowWidth()
    coleApp.getAnimationTriggers()
    coleApp.ontdekkenGallery()
    coleApp.setEventsOnMenu()

    //on window resize
    $(window).resize(function(){

        coleApp.fullscreen()
        coleApp.setWindowWidth()

    });

    //on scroll
    $(window).scroll(function(){

        //if 1 then end the animation call
        if(coleApp.endAnimation == 0){coleApp.addAnimationClass()}
        coleApp.changeMenuClassOnScroll()

    });

});

图片地图

<img id="Image-Maps-Com-image-maps-2014-04-16-084714" src="cssObjects/assets/img/imgmap.jpg" border="0" width="1152" height="756" orgWidth="1152" orgHeight="756" usemap="#image-maps-2014-04-16-084714" alt="" />
<map name="image-maps-2014-04-16-084714" id="ImageMapsCom-image-maps-2014-04-16-084714">
    <area  alt="" title="" class="fancybox" href="#fancy_keukentips" shape="poly" coords="851,80,1090,331,996,448,759,191" style="outline:none;">
    <area  alt="" title="" class="fancybox" href="#fancy_folders" shape="poly" coords="747,206,885,358,805,428,686,272" style="outline:none; ">
    <area  alt="" title="" class="fancybox" id="ontdekkenGallery" shape="poly" coords="899,369,983,458,903,570,859,554,851,494,818,443" style="outline:none;">
    <area  alt="" title="" class="fancybox" href="#fancy_recepten" shape="poly" coords="674,287,821,474,839,535,797,543,615,349" style="outline:none;">
    <area  alt="" title="" class="fancybox" href="#fancy_leveringen" shape="poly" coords="1099,353,1151,408,1003,631,931,574" style="outline:none;">
</map>

有没有人知道如何阻止标记上的默认操作，以便浏览器停留在同一位置？

Answer 1

您需要使用帮助器：

$('[selector]').fancybox({
  padding: 0,
  helpers: {
    overlay: {
      locked: false
    }
  }
});

似乎无法在<area />标签上使用preventDefault（）

1 个答案: