ng-click 上的 $event.stopPropagation 问题答案

【问题标题】：Issues with $event.stopPropagation on ng-clickng-click 上的 $event.stopPropagation 问题
【发布时间】：2017-03-08 17:50:11
【问题描述】：

好的，我一直在尝试解决这个问题。在达到这一点之前，我有过帮助，当您单击并拖动展开的 optgroup 下的选择时，我试图解决一个问题，它会折叠 optgroup。我一直在尝试在控制器中运行 jquery 类事件以防止这种情况发生，不幸的是没有发生任何事情。我什至尝试在单击检查父/子的选项时调用一个函数，但我认为我遗漏了一些东西。现在这里是当前工作的 plnkr：Plnkr

我想知道这是否是一个已知问题，如果是，是否有更好的解决方法？这是我第一次使用 stopPropagation，所以我很可能没有正确使用它。当您单独选择一个选项或按住 ctrl/shift 并选择时，stopPropagation 起作用。如果您单击并拖动传递标签或传递选项的底部，它们不会折叠，但如果您单击并拖动并停止选项，则会折叠。

以下是我试图解释的 GIF：

When drag pass an the options

When you drag to an option

HTML:

<head>
  <script data-require="angular.js@1.4.1" data-semver="1.4.1" src="https://code.angularjs.org/1.4.1/angular.js"></script>
  <link rel="stylesheet" href="style.css" />
  <script src="script.js"></script>
</head>

<body ng-controller="MainCtrl">


  <select multiple class="box">
    <optgroup ng-click="value.expanded = !value.expanded" ng-repeat="(key,value) in data" label="{{value.label}}">
      <option ng-click="$event.stopPropagation()" ng-if="value.expanded" ng-repeat="id in value.ids">{{id}}</option>
    </optgroup>
  </select>

</body>

</html>

其余的都在 plnkr 中

【问题讨论】：

我忘了包括我的实际问题，刚刚更新了它
你能创建一个关于发生了什么的动画 gif 吗？我找不到你。
When you drag pass the options
When you drag to an option
希望能帮上忙哈哈，我尽量用文字解释，但视觉解释通常效果最好

标签： javascript jquery html angularjs

【解决方案1】：

这是一个愚蠢的行为，而 optgroup 是父元素，它是 DOM 中子元素的高度。因此，一旦您在拖动时移动光标并停止拖动，事件ng-click 也会在optgroup 元素上触发（因为光标在它上面）。正如您在runnable plnkr 中看到的那样，我通过添加软件开关使其工作。

查看

<select multiple class="box">
  <optgroup ng-click="clickOptGroup(key);" ng-repeat="(key,value) in data" label="{{value.label}}">
    <option ng-mousedown="mouseDown()" ng-mouseup="mouseUp()" ng-click="$event.stopPropagation();" ng-if="value.expanded" ng-repeat="id in value.ids">{{id}}</option>
  </optgroup>
</select>

AngularJS 应用程序

var app = angular.module('test',[]);

app.controller('MainCtrl',function ($scope, $timeout) {

   var mouseDown = false;

    $scope.data = [{
        label: "My Label", ids: [ "one id", "another id" ], 
        expanded: true
    },{ 
        label: "My Other Label", ids: [ "one id", "another id" ], 
        expanded: false
    }];

    $scope.clickOptGroup = function (key) {
      console.log('in');
      if (!mouseDown) {
         $scope.data[key].expanded = ! $scope.data[key].expanded;
      }
    }

    $scope.mouseDown = function ($event) {
      console.log('mouseDown');
      mouseDown = true;
    }
    $scope.mouseUp = function ($event) {
      $timeout(function () {
         mouseDown = false;
      }, 50);
    }
});

【讨论】：

哇...我真的没有想过要为此创建一个决斗 mouseup/mousedown 事件检查...。令人印象深刻并且很高兴知道这是一个持续存在的问题我真的很感激反应也很快
@DrMints 很高兴为您提供帮助。
我实际上发现了另一个错误哈哈哈，我注意到当我单击并拖动传递 optgroup 标签时，我无法再展开/折叠，除非我重新选择一个选项而不拖动传递标签
我明天去看看。