jQuery：点击外部Div关闭；去除高光

这是我的页面：

我希望能够在弹出div（即视频1、视频2、视频3）之外单击并关闭它们

出于某种原因，当您单击图像地图的区域时，会出现蓝色高光。我怎样才能摆脱它

仅供参考，我正在使用“

函数（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>

jQuery（在HTML页面中）：

---

不要使用

e.preventDefault（）；

使用

e.stopPropagation（）

停止触发文档事件。注意：

：
。preventDefault（）
仅在您单击链接或提交按钮时不希望页面重定向时使用

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

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


});