Question

你可以看到下面的代码，我有两个事件：

父亲dblclick上的

1- target1。

2 dblclick关于儿童target2。

期待结果当我dblclick对孩子target2时，我不想在dblclick上运行target1事件。我怎么能这样做？

＆＃13;

$("#target1").dblclick(function() {
  console.log("I don't want this click when dbclick on target2.");
});
$("#target2").dblclick(function() {
  console.log("Click 2.");
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="Screenshot" style="height:200px; width:300px;">
  <table style="width:100%;">
    <tr>
      <td id="target1">
        target1
        <p id="target2">target2 </p>
      </td>
    </tr>
  </table>
</div>

＆＃13;

Answer 1

您可以将ob_flush();（事件）参数添加到第二个单击功能，然后在第二个单击事件中使用e。这样可以防止点击事件时向下冒泡，单击子元素时可以运行父点击功能。

＆＃13;

e.stopPropagation();

＆＃13;

$("#target1").dblclick(function() {
  console.log("I don't want this click when dbclick on target2.");
});

$("#target2").dblclick(function(e) {
  console.log("Click 2.");
  e.stopPropagation();
});

＆＃13;

Answer 2

在target2中，您需要捕获事件并防止它冒泡。您可以通过致电stopPropagation上的event来完成此操作。

$( "#target2" ).dblclick(function(event) {
    event.stopPropagation();
    console.log( "Click 2." );
});

请参阅this链接。

Answer 3

试试这个

＆＃13;

$("#target1").dblclick(function() {
  console.log("I don't want this click when dbclick on target2.");
});
$("#target2").dblclick(function(e) {
  e.stopPropagation();
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="Screenshot" style="height:200px; width:300px;">
  <table style="width:100%;">
    <tr>
      <td id="target1">
        target1
        <p id="target2">target2 </p>
      </td>
    </tr>
  </table>
</div>

＆＃13;

如何在jquery中阻止父dblclick

3 个答案: