javascript - ng-click 上的 $event.stopPropagation 问题-6ren

javascript - ng-click 上的 $event.stopPropagation 问题

转载作者：行者123 更新时间：2023-11-28 00:59:49

好的，所以我一直在努力解决这个问题。在达到这一点之前我得到过帮助，我正在尝试解决一个问题，当您在展开的 optgroup 下单击并拖动一个选择时，它会折叠 optgroup。我一直在尝试在 Controller 中运行 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中

最佳答案

这是一个愚蠢的行为，因为 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);
    }
});

关于javascript - ng-click 上的 $event.stopPropagation 问题，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/42678408/

文章推荐： c++ - 使用模板特化重载返回类型？

文章推荐： javascript - ie8 附加子不工作

文章推荐： javascript - 将 "Same"多个

首页

博学

6Ren·AI

商城

javascript - ng-click 上的 $event.stopPropagation 问题

查看

AngularJS 应用