Question

我正在创建一个移动菜单，我想为叠加点击添加一个功能。

当我点击菜单（紫色部分）时，它不需要关闭，但是当我点击蓝色部分时，它需要关闭。

我写了一个只获得紫色部分的jQuery，但是当我点击蓝色部分时，alert没有出现。我要JSFiddle进行测试，看看。

这是我的代码

$('.outer-content .inner-content').on('click', function() {
  $(".outer-content .inner-content").data('clicked', 'yes');
  var isClicked = $('.outer-content').data('clicked');
  if (isClicked == 'yes') {
    alert("clicked the blue block");
  } else {
    alert("clicked the purple block");
  }
});

.outer-content {
  width: 100%;
  height: 200px;
  background: lightblue;
  position: relative;
}

.inner-content {
  width: 300px;
  background: purple;
  position: absolute;
  margin: auto;
  top: 0;
  bottom: 0;
  right: 0;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<div class="outer-content">
  <div class="inner-content"></div>
</div>

Answer 1

基本上javascript中有两个事件模型。事件捕获和事件冒泡。在事件冒泡中，如果单击div内部，则首先触发内部div单击事件，然后单击外部div单击。在事件捕获中，首先触发外部div事件，然后触发内部div事件。要停止事件传播，请在单击方法中使用此代码。

  e.stopPropagation();

JSFIDDLE

您的代码：

$('.outer-content').on('click', function(e) {
  alert("clicked the blue block");

});
$('.inner-content').on('click', function(e) {
  alert("clicked the purple block");
  e.stopPropagation();
});

.outer-content {
  width: 100%;
  height: 200px;
  background: lightblue;
  position: relative;
}

.inner-content {
  width: 300px;
  background: purple;
  position: absolute;
  margin: auto;
  top: 0;
  bottom: 0;
  right: 0;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="outer-content">
  <div class="inner-content"></div>
</div>

Answer 2

＆＃13;

$('.outer-content').on('click', function(event) {
  if ($(event.target).hasClass('inner-content')) {
    alert("clicked the purple block");
  } else {
    alert("clicked the blue block");
  }
});

＆＃13;

.outer-content {
  width: 100%;
  height: 200px;
  background: lightblue;
  position: relative;
}

.inner-content {
  width: 300px;
  background: purple;
  position: absolute;
  margin: auto;
  top: 0;
  bottom: 0;
  right: 0;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<div class="outer-content">
  <div class="inner-content"></div>
</div>

＆＃13;

Answer 3

您可以在outer content上添加事件，然后使用event.target属性检查已点击的元素

$('.outer-content').on('click', function(e) {

  if( $(e.target).hasClass('outer-content')){
        alert("clicked the blue block");
  } else {
        alert("clicked the purple block");
  }
});

由于事件冒泡，子元素中的任何事件也将传播到父元素。

Answer 4

＆＃13;

$('.outer-content, div:not("inner-content")').on('click', function() {
  $(".inner-content").slideToggle();
});

＆＃13;

.outer-content {
  width: 100%;
  height: 200px;
  background: lightblue;
  position: relative;
}

.inner-content {
  width: 300px;
  background: purple;
  position: absolute;
  margin: auto;
  top: 0;
  bottom: 0;
  right: 0;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<div class="outer-content">
  <div class="inner-content"></div>
</div>

＆＃13;

Answer 5

$('div').on('click', function(e) {
    e.preventDefault();
    e.stopImmediatePropagation()
  if($(e.target).is('.inner-content')){
  	alert("clicked the purple block");
  }else{
  	alert("clicked the blue block");
  }
});

.outer-content{
  width:100%;
  height:200px;
  background:lightblue;
  position:relative;
}

.inner-content{
  width:300px;
  background:purple;
  position:absolute;
  margin:auto;
  top:0;  bottom:0;  right:0;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="outer-content">
  <div class="inner-content"></div>
</div>

Answer 6

当我点击菜单（紫色部分）时，它不需要关闭，但是当我点击蓝色部分，然后需要关闭

为什么不直接定位蓝色元素，只处理点击它时关闭的任何代码，如下所示。

如果在点击紫色元素时需要执行其他代码，请单独绑定。

$('.outer-content').on('click', function(e) {
  if (e.target == this) {
    // add "close" code here
    alert("will close");
  }
});

// You still can add code when clicking the purple element if needed...
$('.inner-content').on('click', function(e) {
  alert("I'm purple but separate code and will not close");
});

.outer-content {
  width: 100%;
  height: 200px;
  background: lightblue;
  position: relative;
}

.inner-content {
  width: 300px;
  background: purple;
  position: absolute;
  margin: auto;
  top: 0;
  bottom: 0;
  right: 0;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<div class="outer-content">
  <div class="inner-content"></div>
</div>

如何使用Jquery检测到内部div的click事件

6 个答案: