停止从通过库动态创建的 DOM 元素的事件传播答案

【问题标题】：Stop event propogation from DOM elements created dynamically via a library停止从通过库动态创建的 DOM 元素的事件传播
【发布时间】：2018-12-31 20:59:15
【问题描述】：

我正在使用 AngularJS 1.7.5、x-editable 和智能表。在表格行内，我有一个锚点，它通过 x-editable 打开一个选择。我还在智能表中启用行选择。

问题是我不确定如何阻止选择中的点击事件传播和选择或取消选择表格行。我编写了一个指令来禁止从打开选择的 A 元素中单击，但选择是由 x-editable 库创建的（例如，不在我的 HTML 中。）

https://plnkr.co/edit/kAKbgLg05uBA9etICxV7?p=preview

<!DOCTYPE html>
<html ng-app="myApp">

<head>
  <script data-require="jquery@*" data-semver="3.2.1" src="https://cdn.jsdelivr.net/npm/jquery@3.2.1/dist/jquery.min.js"></script>
  <script data-require="angular.js@1.7.0" data-semver="1.7.0" src="https://code.angularjs.org/1.7.0/angular.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/angular-smart-table/2.1.8/smart-table.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-bootstrap/1.1.2/ui-bootstrap-tpls.js"></script>
  <script data-require="xeditable@*" data-semver="0.1.8" src="https://vitalets.github.io/angular-xeditable/dist/js/xeditable.js"></script>
  <link data-require="bootstrap-css@3.3.7" data-semver="3.2.0" rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" />
  <link rel="stylesheet" href="style.css" />
  <script src="script.js"></script>
</head>

<body ng-controller="myController as $ctrl">
  <table st-table="collection" class="table">
    <thead>
      <tr>
        <th>Id</th>
        <th>Name</th>
        <th>Secret Identity</th>
      </tr>
    </thead>
    <tbody>
      <tr ng-repeat="row in collection" st-select-row="row" st-select-mode="multiple">
        <td>{{ row.id }}</td>
        <td>{{ row.name }}</td>
        <td>
          <a href="#" editable-select="row.secretIdentity" data-value="{{ row.secretIdentity }}" class="editable editable-click" buttons="no" mode="inline" e-ng-options="i for i in options" stop-event="click">
                {{ row.secretIdentity }}
               </a>
        </td>
      </tr>
    </tbody>
  </table>
</body>

</html>

angular
  .module('myApp', ['xeditable', 'smart-table', 'ui.bootstrap'])
  .controller('myController', ['$scope', 'editableOptions', function($scope, editableOptions) {
    editableOptions.theme = 'bs3';

    $scope.collection = [{
      name: 'Ed',
      id: 1,
      secretIdentity: 'Just some guy'
    }, {
      name: 'Tony',
      id: 2,
      secretIdentity: 'Iron Man'
    }, {
      name: 'Steve',
      id: 3,
      secretIdentity: 'Captain America'
    }, {
      name: 'Bruce',
      id: 4,
      secretIdentity: 'Hulk'
    }, {
      name: 'Clint',
      id: 5,
      secretIdentity: 'Hawkeye'
    }, {
      name: 'Natasha',
      id: 6,
      secretIdentity: 'Black Widow'
    }, ];

    $scope.options = ['Iron Man', 'Captain America', 'Hulk', 'Black Widow', 'Hawkeye', 'Just some guy'];
  }])

  .directive('stopEvent', () => {
    return {
      restrict: 'A',
      link: (scope, element, attr) => {
        if (attr && attr.stopEvent) {
          element.bind(attr.stopEvent, e => {
            e.stopPropagation();
          });
        }
      }
    };
  });

有没有一种标准的方法来操作由 x-editable 创建的元素，它也可以与 AngularJS 配合使用？

【问题讨论】：

标签： angularjs x-editable smart-table

【解决方案1】：

您可以将 <a> 包装在 <div> 中，并将您的 stop-event 指令添加到该 div。

<td>
  <div stop-event="click">
     <a href="#" 
         editable-select="row.secretIdentity" 
         data-value="{{ row.secretIdentity }}" 
         class="editable editable-click" 
         buttons="no" 
         mode="inline"
         e-ng-options="i for i in options"
      >
         {{ row.secretIdentity }}
      </a>
  </div>
</td>

【讨论】：

那...有道理。如果你说不出来，我不是 UI 开发人员。谢谢，等我回到办公室试试看。