Javascript 捕获对div的单击_Javascript_Jquery

Javascript 捕获对div的单击

javascript jquery

Javascript 捕获对div的单击,javascript,jquery,Javascript,Jquery,我有以下代码（HTML和JS）：订阅 &时代；标题描述坐标单击： x 发送 $（文档）.ready（函数（）{ $（'.imgpo'）。单击（函数（e）{ var posX=$（this.position（）.left，posY=$（this.position（）.top； $（'.coorX'）.html（（e.pageX-posX-10））； $（'.coorY'）.html（（e.pageY-posY-10））； $（'.formAdd'）。单击（）； }); $（'.saveB

我有以下代码（HTML和JS）：


订阅
&时代；
标题
描述
坐标单击：
x
发送
$（文档）.ready（函数（）{
$（'.imgpo'）。单击（函数（e）{
var posX=$（this.position（）.left，posY=$（this.position（）.top；
$（'.coorX'）.html（（e.pageX-posX-10））；
$（'.coorY'）.html（（e.pageY-posY-10））；
$（'.formAdd'）。单击（）；
});
$（'.saveBtn'）。单击（函数（e）{
var val1=$（“.val1”）.val（）；
var val2=$（“.val2”）.val（）；
警报（“保存”）；
});
$（'.scalize'）.scalize({
样式选择器：“圆”，
animationPopoverIn:“flipInY”，
AnimationPopoOverout:“flipOutY”，
动画选择器：“脉冲2”
});
常量$tooltip=$（'.tooltips'）；
$tooltip.tooltip({
是的，
触发器：“单击”，
位置：'顶部'，
});
$tooltip.on（'show.bs.tooltip'，（）=>{
$（'.tooltip'）。而不是（this.remove（）；
});
});

Prview：

单击图像后，将显示一个窗体-它工作正常

单击该点后，我打开工具提示和表单。这是一个错误。只应显示工具提示

如何修复它

我使用Bootstrap 3。

您可以使用

ev.stopPropagation（）

这样单击就不会传递到父div

$（“.parent”）。在（'click'，function（）{
log（'clicked on parent'）；
})
$（“.child”）。在（'click'，函数（ev）上{
ev.stopPropagation（）；
log（'clicked on child'）；
})

.parent{
宽度：100px；
高度：100px；
背景颜色：绿色；
}
.孩子{
宽度：50px；
高度：50px；
背景色：红色；
}

您可以使用

ev.stopPropagation（）

这样单击就不会传递到父div

$（“.parent”）。在（'click'，function（）{
log（'clicked on parent'）；
})
$（“.child”）。在（'click'，函数（ev）上{
ev.stopPropagation（）；
log（'clicked on child'）；
})

.parent{
宽度：100px；
高度：100px；
背景颜色：绿色；
}
.孩子{
宽度：50px；
高度：50px；
背景色：红色；
}

Remove bootstrap data toggle=“tooltip”属性，这样它就不会打开模式。Remove bootstrap data toggle=“tooltip”属性，这样它就不会打开模式。在您的情况下，您可以添加

$tooltip.on（'click'，（ev）=>{ev.stopPropagation（）；}）

来阻止模式打开，在案例中单击工具提示时，您可以添加

$tooltip.on（'click'，（ev）=>{ev.stopPropagation（）；}）

以在单击工具提示时停止打开模式

<body>
      <div class="container">
         <div class="modal fade" id="modalSubscriptionForm" tabindex="-1" role="dialog" aria-labelledby="myModalLabel"
            aria-hidden="true">
            <div class="modal-dialog" role="document">
               <div class="modal-content">
                  <div class="modal-header text-center">
                     <h4 class="modal-title w-100 font-weight-bold">Subscribe</h4>
                     <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                     <span aria-hidden="true">&times;</span>
                     </button>
                  </div>
                  <div class="modal-body mx-3">
                     <div class="md-form mb-5">
                        <i class="fas fa-user prefix grey-text"></i>
                        <input type="text" id="form3" class="form-control validate val1" name="val1">
                        <label data-error="wrong" data-success="right" for="form3">Title</label>
                     </div>
                     <div class="md-form mb-4">
                        <i class="fas fa-envelope prefix grey-text"></i>
                        <input type="email" id="form2" class="form-control validate val2" name="val2">
                        <label data-error="wrong" data-success="right" for="form2">Desc</label>
                     </div>
                     <div class="md-form mb-4">
                        <i class="fas fa-envelope prefix grey-text"></i>
                        <label data-error="wrong" data-success="right" for="form2">
                           Coordinates click: 
                           <div class="coorX"></div>
                           x 
                           <div class="coorY"></div>
                        </label>
                     </div>
                  </div>
                  <div class="modal-footer d-flex justify-content-center">
                     <button class="btn btn-indigo saveBtn">Send <i class="fas fa-paper-plane-o ml-1"></i></button>
                  </div>
               </div>
            </div>
         </div>
         <div class="scalize imgpo">
            <img src="img/jacket.png" alt="" class="target ">
            <div class="item-point" data-top="130" data-left="300" >
               <div><a href="#" class="toggle tooltips" title="<h1><b>Another</b> <em>one</em> here too 1</h1>" data-toggle="tooltip" data-placement="top" data-html="true" rel="tooltip"></a></div>
            </div>
            <div class="item-point" data-top="180" data-left="462" >
               <div><a href="#" class="toggle tooltips" title="<h1><b>Another</b> <em>one</em> here too 2</h1>" data-toggle="tooltip" data-placement="top" data-html="true" rel="tooltip"></a></div>
            </div>
            <div class="item-point"ot data-top="380" data-left="215">
               <div><a href="#" class="toggle tooltips" title="<h1><b>Another</b> <em>one</em> here too 3</h1>" data-toggle="tooltip" data-placement="top" data-html="true" rel="tooltip"></a></div>
            </div>
            <div class="item-point"ot  data-left="357"  data-top="458">
               <div><a href="#" class="toggle tooltips" title="<h1><b>xxxxx</b> <em>one</em> here too 3</h1>" data-toggle="tooltip" data-placement="top" data-html="true" rel="tooltip"></a></div>
            </div>
         </div>
      </div>
      <a href="" class="btn btn-default btn-rounded mb-4 formAdd" data-toggle="modal" data-target="#modalSubscriptionForm" style="display:none"></a>


      <script type="text/javascript">
         $(document).ready(function(){

         $('.imgpo').click(function(e) {
          var posX = $(this).position().left,posY = $(this).position().top;
          $('.coorX').html((e.pageX - posX -10));
          $('.coorY').html((e.pageY - posY -10));
          $('.formAdd').click();
         });

         $('.saveBtn').click(function(e) {
            var val1 = $(".val1").val(); 
            var val2 = $(".val2").val(); 
            alert('Save');
         });


              $('.scalize').scalize({
                  styleSelector: 'circle',
                  animationPopoverIn: 'flipInY',
                  animationPopoverOut: 'flipOutY',
                  animationSelector: 'pulse2'
              });


              const $tooltip = $('.tooltips');
         $tooltip.tooltip({
         html: true,
         trigger: 'click',
         placement: 'top',
         });
         $tooltip.on('show.bs.tooltip', () => {
         $('.tooltip').not(this).remove();
         });

          });            
      </script>