jQuery - 在父亲

Question

我有这段代码

<div class="div_father" style="color:#0000FF; border-style: ridge;">
  <h3>This is the div father</h3>
  <div class="div_child" style="color:#0000FF; border-style: ridge;">
   <p>This the div child.</p>
  </div>
</div>

这是一个div父亲的div孩子。 原始代码，当用户按下子div时会发生这种情况。 现在，当用户按下div父亲的任何地方时，我被要求触发事件。

O可以禁用函数child，一旦它在父亲内部，但我不想改变原始代码。

使用这个JS代码，当用户躲过孩子时，事件被触发两次。

$(document).ready(function(){
    $('.div_father,.div_child').click(function () {
        alert("ok");
    });
});

有没有办法避免被触发两次？

jsFiddle

Answer 1

您只需在活动中添加stopPropagation()即可。 Fiddle

$('.div_father,.div_child').click(function (e) {
  e.stopPropagation()
  alert("ok");
});

Answer 2

您需要阻止事件从子级冒泡到父级。你可以简单地从你的处理程序中返回false，即

$(document).ready(function(){
    $('.div_father,.div_child').click(function () {
        alert("ok");
        return false;
    });
});

Answer 3

只需使用$（＆＃39; .div_father＆＃39;）即可。但尚未在所有浏览器上测试它。

＆＃13;

＆＃13;

$(document).ready(function(){
	$('.div_father').click(function () {
        alert("ok");
    });
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="div_father" style="color:#0000FF; border-style: ridge;">
  <h3>This is the div father</h3>
  <div class="div_child" style="color:#0000FF; border-style: ridge;">
   <p>This the div child.</p>
  </div>
</div>

＆＃13;

＆＃13;

＆＃13;

Answer 4

你需要：

• stopPropagation
• 针对父div
测试目标元素

示例（updated jsfiddle）：

＆＃13;

＆＃13;

$(document).ready(function(){
	$('.div_father,.div_child').click(function (e) {
  			e.stopPropagation();
        if ($(this).is('.div_father')) {
        	console.log("ok");
        }
    });
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>


<div class="div_father" style="color:#0000FF; border-style: ridge;">
  <h3>This is the div father</h3>
  <div class="div_child" style="color:#0000FF; border-style: ridge;">
   <p>This the div child.</p>
  </div>
</div>

＆＃13;

＆＃13;

＆＃13;