Question

所以，我在可点击的对象上有一个可点击的对象

十字标记有更大的z指数。

 .close {
  position: absolute;
  margin-top:3px;
  margin-left: 323px;
  width: 23px;
  height: 23px;
  opacity: 0.3;
  z-index: 5px;
   } //cross mark

.quickmode_block{
    width: 400px;
    height: 80px;
    border: 1px solid rgba(255, 255, 255, .4);
    -moz-border-radius: 4px;
    -webkit-border-radius: 4px;
    border-radius: 4px;
    -moz-background-clip: padding;
    -webkit-background-clip: padding-box;
    background-clip: padding-box;
    display: block;
    font-family: 'Source Sans Pro', sans-serif;
    font-size: 18px;
    color: #fff;
    background: rgba(255, 255, 255, 0.4) no-repeat scroll 16px 16px;
    padding-left: 45px;
    margin: 0 auto;
    margin-bottom: 20px;
 }

<div style="margin-top:-7%" id="add_quicksetup" style="height:100px;width:500px;margin-top:0%;margin-right:0%;position: relative" class="quickmode_block">
                <div class="close">
                </div>
                <center style="margin-top:20px"><font size="5" style="margin-left:-14%;">Add Quick Mode</font></center>
            </div>

我使用jquery .click DOM。但不知何故，当我点击它时，它仍会触发两者。对此有什么解决方案吗？

$(document).ready(function() {

         $('#add_quicksetup_confirm').click(function() {
                    //some event;
                });

            });
$(document).ready(function() {
         $('.close').click(function() {
                    //some event;
                });

            });

Answer 1

您可以使用e.stopPropagation（）

$('#add_quicksetup').on('click', function(e){
   alert('add_quicksetup');
})

$('.close').on('click', function(e){
   e.stopPropagation();
   alert('close');
})

这是我的fiddle

Answer 2

添加

  $('.close').click(function(event) {
                event.stopImmediatePropagation();
                //some event;
            });

Answer 3

对于父元素的停止传播事件，你可以从子元素事件

return false;

$(document).ready(function() {
         $('#add_quicksetup_confirm').click(function() {
             //some event;
         });
         $('.close').click(function() {
             //some event;
             return false;
        });
});

或者您可以使用事件对象的stopPropagation()方法

$(document).ready(function() {
         $('#add_quicksetup_confirm').click(function() {
             //some event;
         });
         $('.close').click(function(e) {
             e.stopPropagation();
             //some event;
        });
});

Answer 4

你的CSS有问题。两个div（＆＃39;关闭按钮＆＃39; div和＆＃39;添加快速模式＆＃39;潜水）相互重叠。因此，使用以下命令更改关闭按钮/ x标记的css样式：

.close {
    position: relative;
    margin-top: 3px;
    float: right !important;
    width: 23px;
    height: 23px;
    opacity: 0.3;
    z-index: 50;
}

Jquery - Clickable对象上的Clickable对象

4 个答案: