javascript - angularjs 确定我的事件中的 ng-click 和 href

Question

md-list
  md-list-item.md-2-line ng-repeat="document in ctrl.documents"
    div.md-list-item-text ng-click="ctrl.getDocument($event, document)"
      span ng-bind-html="(document.content | trustedHtml)"

嗨，我的 MD 列表中有这个问题 ng-click命名getDocument这将出现一个包含文档的对话框。但在我的span有内容。包含像 href 这样的 html 标签。示例

<span> blah blah blah blah </span><a href="person/1" target=_blanl >

现在的问题是，当我单击链接时，它将进入新选项卡并打开对话框

如何确定用户是否单击 href或the md-list项目，因此将出现对话框

@getDocument = (ev, document) =>
  console.log ev

Answer 1

据我了解，链接在您的范围内呈现，但是当您单击它时，它会将您发送到另一个选项卡并仍然打开对话框。

您的链接仍然是propagating它的点击事件传递给父对象，因此您应该做的是将点击事件移动到另一个内部不包含链接的标签，或者向您的链接添加“event.stopPropagation”:

<a href="https://someurl" ng-click="$event.stopPropagation()">link</a>

这两者都可以。

编辑:为了更好的设计并避免意外事件传播等问题，也许您可​​以这样做:

md-list
  md-list-item.md-2-line ng-repeat="document in ctrl.documents"
    div.md-list-item-text
      button ng-click="ctrl.getDocument($event, document)"
      span ng-bind-html="(document.content | trustedHtml)"

或者，您还可以检查哪个元素触发了单击事件。例如，由于您的主要问题是链接，因此您可以在 getDocument() 函数中执行类似的操作:

ctrl.getDocument = function (event, document) {
  if (event.target.tagName === 'A') {
    return;
  }

  // your code
}