e.preventDefault on child element in angularjs 在angularjs中，对子元素使用e.preventDefault

12 浏览
0 Comments

e.preventDefault on child element in angularjs 在angularjs中，对子元素使用e.preventDefault

我在表格行上有一个点击事件，并且在这一行中还有一个带有点击事件的删除按钮。当我点击删除按钮时，行上的点击事件也会触发。

以下是我的代码。

{{user.firstname}}

{{user.lastname}}

{{user.email}}

我如何防止在点击表格单元格中的删除按钮时触发showUser事件？

0

2 答案

0 Comments

问题的出现原因是在AngularJS中，当一个子元素触发了事件，并且同时也有父元素监听同样的事件时，如果不做处理，父元素的事件处理函数也会被触发。

解决方法是在子元素的事件处理函数中，通过传递$event对象到父元素的事件处理函数中，然后在父元素的事件处理函数中通过调用$event.stopPropagation()来阻止事件的冒泡。

以下是解决方法的代码示例：

HTML模板：

<div ng-click="parentHandler($event)">
  <div ng-click="childHandler($event)">
  </div>
</div>

子元素的事件处理函数：

$scope.childHandler = function ($event) {
  if (wanna_stop_it()) {
    $event.stopPropagation();
  }
  ...
};

通过以上方法，我们可以在子元素的事件处理函数中决定是否停止事件的冒泡，从而避免父元素的事件处理函数被触发。

这种方法比在HTML属性中执行多个表达式更加优雅和简洁。同时也要记得在HTML中传递$event作为参数给ng-click指令。

此外，如果希望立即停止冒泡，可以使用$event.stopImmediatePropagation()方法。

以上方法简单而有效，却常常被忽视。许多人会看到已选择的答案并想着"真的吗？这么丑陋？"，却没有意识到可以将$event作为参数传递。非常好用！

0
0 Comments

问题出现的原因是在使用 ng-click 指令时，子元素的点击事件会冒泡到父元素，导致父元素的点击事件也被触发。解决方法是使用自定义的指令 isolate-click，在其中阻止事件冒泡，以实现点击子元素时不触发父元素的点击事件。

在使用 isolate-click 指令时，可以将其应用于需要限制点击范围的元素上，如按钮。如果希望只限制按钮的点击范围，而不是整个单元格，可以将按钮包裹在一个 span 元素中，并将 isolate-click 指令应用于 span 元素。

isolate-click 指令的代码如下：

angular.module('awesome', []).directive('isolateClick', function() {
  return {
    link: function(scope, elem) {
      elem.on('click', function(e){
        e.stopPropagation();
      });
    }
  };
});

注意，需要注意的是，使用 isolate-click 指令会阻止所有在最后一个单元格上的点击事件，而不仅仅是按钮的点击事件。如果不希望这样，可以将按钮包裹在一个 span 元素中，并将 isolate-click 指令应用于 span 元素。

但是需要注意的是，其他插件可能会监听这些点击事件。如果使用的是在点击外部关闭的工具提示插件，可能永远无法关闭，因为外部的点击事件不会传播到 body 元素。

解决方法是在事件中添加一个属性，如 ignoreNgClick=true，并在处理事件时判断是否忽略该事件。可以在原始的 ngClick 指令中进行修改，但这样做可能会导致代码变得混乱。可以考虑使用另一个自定义指令 continue-click，在父元素上应用该指令，以继续事件传播，从而解决这个问题。

使用 isolate-click 指令可以限制点击范围，但需要注意可能与其他插件冲突的问题。在需要继续事件传播的情况下，可以使用 continue-click 指令来解决。

0