jQuery：单击外部 div 将其关闭；摆脱亮点答案

【问题标题】：jQuery: Click Outside Div to Close It; Get Rid of HighlightsjQuery：单击外部 div 将其关闭；摆脱亮点
【发布时间】：2013-11-23 08:58:49
【问题描述】：

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

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

仅供参考，我使用“function(e){ e.preventDefault();”是为了在弹出 div 打开时阻止页面移动。

就是这样。

这是 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()
      });


});

【问题讨论】：

标签： jquery click

【解决方案1】：

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

【讨论】：