Javascript 停止表行上的JS事件传播单击

我有以下HTML表格：

<table>
  <tr>
    <td>
      Row 1
    </td>
    <td>
      <!-- Hidden JSF-button -->
      <button class="hide" />
    </td>
  </tr>
</table>

click事件向上传播，并将导致一个永无止境的循环（可在此处看到：）

在对SO进行一些搜索之后，很明显，解决方案是调用

event.stopPropagation

，
像这样（可以在这里看到：）：

上述解决方案有效。但这感觉像一个黑客，我不喜欢它

---

我是否需要在

$按钮上注册一个单击处理程序来调用
事件.stopPropagation
？有没有更好的方法防止点击事件冒泡
 一个更好的总体解决方案是根本不触发
单击事件，而只是拥有一个单独的函数，您可以调用该函数并封装事件处理程序逻辑

function doSomething(someArg) {
    //do something
}

$('button').click(function () {
    doSomething(/*pass whatever you want*/);
});

$('table tr').on('click', function () {
    doSomething(/*pass whatever you want*/);
});

请注意，
doSomething
没有事件处理程序签名，例如
（e）
。这通常是一个很好的实践，它只传递函数自己工作所需的内容，而不是传递整个事件对象。这将简化
doSomething
的实现，并将其与事件对象完全解耦

编辑：

对不起，当用户点击时，我需要手动触发按钮
点击tr。请查看我对@magyar1984问题的评论

在这种情况下，您可能已经找到了最好的解决方案，即在按钮上附加一个事件侦听器并调用
stopPropagation
。您还可以通过使用元素上的
events
数据来获取所有单击事件处理程序，但请注意，您将依赖jQuery内部构件，因此代码可能会在将来的版本中中断

了解如何检索事件处理程序。
通过将代码笔更新为以下内容，我可以让它只注册按钮单击一次：

var handleClick = function(e) {
  var $button = $(this).find('button');  
  console.log('trigger click on', $button);

  $button.trigger('click');
};
$('button.hide').on('click',function(e){
  e.stopPropagation();
});

$(function() {
    $('table tr')
    .on('click', handleClick);
});

但是一般的想法是在按钮上声明onClick事件并停止传播。
修改按钮行为，特别是在框架中，可能会导致一些意外问题。您可以向行中添加一个标志，并使用它检查是否应该单击按钮。但是你必须知道有多少点击是自动生成的，应该省略

var handleClick = function(e) {
  var $button = $(this).find('button');  
  console.log('triggerring click on...', $button);
  if (this.clicked !== true) {
    console.log('and clicked!')
    this.clicked = true;
    $button.trigger('click');
  } else
    this.clicked = false;
};

代码如下：
为什么需要触发对隐藏按钮的单击？该按钮实际上是一个隐藏的JSF按钮（）。当用户单击表中的一行时，我会触发对按钮的单击，这会调用备份控制器（服务器端）来设置值。哦，对不起，我不知道涉及到MVC。我不确定这是否有帮助，但当您自动触发事件时，event.target是什么？如果是按钮，您可能可以在tr事件处理程序中对其进行过滤和stopPropagation？抱歉，但当用户单击tr时，我需要手动触发按钮单击。请参阅我对@magyar1984问题的评论。谢谢，是的，我假设解决方案必须是手动防止事件冒泡。我制作了一个插件，可以作为防止冒泡的快捷方式。
var handleClick = function(e) {
  var $button = $(this).find('button');  
  console.log('trigger click on', $button);

  $button.trigger('click');
};
$('button.hide').on('click',function(e){
  e.stopPropagation();
});

$(function() {
    $('table tr')
    .on('click', handleClick);
});

var handleClick = function(e) {
  var $button = $(this).find('button');  
  console.log('triggerring click on...', $button);
  if (this.clicked !== true) {
    console.log('and clicked!')
    this.clicked = true;
    $button.trigger('click');
  } else
    this.clicked = false;
};