Question

我正在尝试创建一个表，其中我的<tr>充当父元素，在我的<tr>内，我有一个<td>元素列表，我希望所有其中的一个会在单击<tr>时触发，除了一个<td>之外，因为特定的<td>我有3个的触发有一个触发器。

问题是我在<tr>和上都具有点击功能，当然，当我单击时，<tr>也同时具有触发是因为是父级，我不希望这种情况发生，我希望当单击我的时，父级不会触发，而只是的

我有很多<td>，并且我试图避免使每个<td>都具有单击功能以执行相同的操作，除了最后一个<td>

有可能吗？

HTML：

<table>
   <tbody>
      <tr class="parentdiv">
         <td>something</td>
         <td style="width:30%;">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</td>
         <td class="child"><span class="icon1"> icon1 </span><span class="icon2">icon2 </span><span class="icon3">icon3</span></td>
      </tr>
   </tbody>
</table>

JS：

$(".parentdiv").click(function () { 
 alert( 'clicked on parent' );

            });

$(".icon1").click(function () { 
     alert( 'clicked on icon 1' );

            });

$(".icon2").click(function () { 
  alert( 'clicked on icon 2' );

            });

$(".icon3").click(function () { 
 alert( 'clicked on icon 3' );

            });

这是CodePen

谢谢。

Answer 1

您可以使用stopPropagation()阻止click事件传播到父级。例如：

$(".icon1").click(function (event) { 
    event.stopPropagation(); 
    // your code here...
});

Answer 2

使用event.stopPropagation()防止事件冒泡。

$(".parentdiv").click(function() {
  alert('clicked on parent');
});

$(".icon1").click(function(e) {
  e.stopPropagation();
  alert('clicked on icon 1');
});

$(".icon2").click(function(e) {
  e.stopPropagation();
  alert('clicked on icon 2');
});

$(".icon3").click(function(e) {
  e.stopPropagation();
  alert('clicked on icon 3');
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
  <tbody>
    <tr class="parentdiv">
      <td>something</td>
      <td style="width:30%;">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</td>
      <td class="child"><span class="icon1"> icon1 </span><span class="icon2">icon2 </span><span class="icon3">icon3</span></td>
    </tr>
  </tbody>
</table>

如何在父元素上执行点击功能并使子元素在不触发父元素的情况下执行其他操作

2 个答案: