preventDefault（）方法上<area>標籤，似乎不可能

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 
    } 
    } 
});