Question

这是我的页面：http://frankjuval.com/web/playground/jQpage/index.html

我希望能够点击弹出式窗口之外（即视频1，视频2，视频3）并关闭它们。
出于某种原因，当您单击图像地图的区域时，会出现蓝色突出显示。我如何摆脱它？

仅供参考，我正在使用“function(e){ e.preventDefault();”以便在弹出式窗口打开时停止页面移动。

就是这样。

这是HTML：

<div class="page">

    <div id="map">
        <img src="images/content_transparency.png" alt="all_content" width="1324" usemap="#3dmap">
    <map id="3dmap" name="3dmap">
        <area id="graphic1" shape="rect" coords="271,811,561,1208" href="#video1" />
        <area id="graphic2" shape="circle" coords="646,910,55" href="#video2" />
        <area id="graphic3" shape="rect" coords="711,898,1016,1204" href="#video3" />
        <area shape="default" nohref="nohref" title="Default" alt="Default"/>
    </map>
    </div><!-- END MAP -->

    <div id="video1" style="display: none;">
        <img src="images/video1.png" alt="video-Overlay_IOA" width="624">
    </div>

    <div id="video2" style="display: none;">
        <img src="images/video2.png" alt="video-Overlay_HE" width="624">
    </div>

    <div id="video3" style="display: none;">
        <img src="images/video3.png" alt="video-Overlay_USF" width="624">
    </div>

</div>

CSS：

.page {
  background: #000 url(../images/PainterlyWater_02.jpg) no-repeat center center fixed;

}

body {
    width: 100%;
    height: 100%;
}
.page {
    width: 100%;
    height: auto;
    position: relative;
}
#map {
    width: 1020px;
    height: auto;
    margin: auto;
    overflow: hidden;
    position: relative;

}
#map img {
    display: block;
    margin: auto auto auto -17px;

}

#video1,
#video2,
#video3 {
    width: 624px;
    height: 477px;
    position: absolute;
    top: 18%;
    left: 36%;
    overflow: hidden;
}

jQuery（在HTML页面中）：

$(function(){

// VIDEO 1
$("#graphic1").click(function(e){
    e.preventDefault();
      $("#video1").fadeToggle(400);
      $(this).toggleClass("active");
      });

      $( "#video1" ).click(function() {
      $( "#video1" ).hide()
      });

// VIDEO 2
$("#graphic2").click(function(e){
    e.preventDefault();
      $("#video2").fadeToggle(400);
      $(this).toggleClass("active");
      });

      $( "#video2" ).click(function() {
      $( "#video2" ).hide()
      });

// VIDEO 2
$("#graphic3").click(function(e){
    e.preventDefault();
      $("#video3").fadeToggle(400);
      $(this).toggleClass("active");
      });

      $( "#video3" ).click(function() {
      $( "#video3" ).hide()
      });


});

Answer 1

而不是e.preventDefault();使用e.stopPropagation()来停止文档事件以触发它。注意：.preventDefault()仅在您不希望在点击链接或提交按钮时重定向页面时使用。

jQuery：点击Outside Div关闭它;摆脱亮点

1 个答案: