无法在指令的 DOM 元素下绑定 DOM 对象上的事件回调

Posted 2023-05-09

【中文标题】无法在指令的 DOM 元素下绑定 DOM 对象上的事件回调

【英文标题】：Cannot bind event callbacks on DOM objects under a directive's DOM element

【发布时间】：2018-05-03 06:12:08

【问题描述】：

我目前正在尝试重构一些非常简单的 AngularJS 代码，以将所有功能移动到***指令下。父元素被赋予指令，指令将“mousemove”事件绑定到该元素，然后通过具有特定 ID 的每个子元素并将“mousedown”和“mouseup”事件回调绑定到它。

angular.module('DataStructureVisualizer').
directive('dragDrop', function () 

  return 
      link: function ($scope, element, attrs) 
        var mouseLocX = 0;
        var mouseLocY = 0;
        var isElementHeldDown = false;
        var elementHeldDown;
        var heldDownElementWidth = 0;
        var heldDownElementHeight = 0;

    //Bind callback to get mouse position
    $scope.captureCoordinate = function($event) 
        mouseLocX = $event.x;
        mouseLocY = $event.y;

        if(isElementHeldDown == true) 
            elementHeldDown.css('position', 'absolute');
            elementHeldDown.css('left', mouseLocX - heldDownElementWidth / 2 + 'px');
            elementHeldDown.css('top', mouseLocY - heldDownElementHeight / 2 + 'px');
        
    

    var dragDroppables = element[0].querySelectorAll('#DragDroppable');

    for (var elementIdx = 0; elementIdx < dragDroppables.length; elementIdx++) 
        var bindElement = dragDroppables[elementIdx];

        bindElement.on('mousedown', function() 
            element.css('background-color', 'rgb(17, 83, 252)');            
            elementHeldDown = element;
            isElementHeldDown = true;

            var style = window.getComputedStyle(element[0]);           
            heldDownElementWidth = parseInt(style.getPropertyValue('width'));
            heldDownElementHeight = parseInt(style.getPropertyValue('height'));     
        );
        bindElement.on('mouseup', function () 
            element.css('background-color', 'rgb(73, 122, 255)');
            isElementHeldDown = false;
        );
    

我可以完美地绑定到元素，但是当使用 element.querySelectorAll 并遍历返回的元素列表时，它会返回并说“bindElement.on() 不是函数”

这是 html 部分：

  <div id="DragDropArea" ng-mousemove="captureCoordinate($event)" drag-drop>
      <!-- <div>x: x</div>
      <div>y: y</div> -->
      <div id="DragDroppable">
        <div line-draw>64</div>
      </div>
      <div id="DragDroppable">
        <div line-draw>64</div>
      </div>
  </div>

【问题讨论】：

这是因为bindElement 是Element，而不是jQuery 或jqLit​​e 样式对象。

我相信angular.element(bindElement).on('mousedown', function() ... 会起作用（没有测试你上面的指令）

@davidkonrad 成功了 - 谢谢！

【参考方案1】：

这个答案在于，当抓取子元素时，它会返回一个元素的 NodeList，而这些元素需要是 jQuery 或 jqLit​​e 样式的对象。改变

bindElement.on('mousedown', function() ...

到

angular.element(bindElement).on('mousedown', function() ...

解决了问题。