Question

我有一段使用triggerHandler调用正确事件的代码，但事件无效。这是代码和jsFiddle：

HTML：

<body ng-app="app">
    <button box-creator>Button</button>
</body>

JS：

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

app.directive("boxCreator", function($document, $compile) {
    return {
        restrict: 'A',
        link: function($scope, $element, $attrs) {
            $element.bind("mousedown", function($event) {
                var newNode = $compile('<div class="box" drag></div>')($scope);

                newNode.css({
                    top: $event.pageY - 25 + "px",
                    left: $event.pageX - 25 + "px"
                    });

                angular.element($document[0].body).append(newNode);
                angular.element(newNode).triggerHandler("mousedown"); // This line is called
            });
        }
    }
});

app.directive("drag", function($document) {
    return function(scope, element, attr) {
        var startX = 0, startY = 0, x = event.pageX - 25, y = event.pageY - 25;

        element.css({
         position: 'absolute',
         cursor: 'pointer'
        });

        element.on('mousedown', function(event) {
          console.debug("in"); // This line is printed, but the lines below doesn't apply correctly
          event.preventDefault();
          startX = event.pageX - x;
          startY = event.pageY - y;
          $document.on('mousemove', mousemove);
          $document.on('mouseup', mouseup);
        });

        function mousemove(event) {
          y = event.pageY - startY;
          x = event.pageX - startX;
          element.css({
            top: y + 'px',
            left:  x + 'px'
          });
        }

        function mouseup() {
          $document.off('mousemove', mousemove);
          $document.off('mouseup', mouseup);
        }
      };
    });

JSFIDDLE

它应该在创建后直接拖动它，但它不是。

我可能没有正确使用它，我错过了什么？

Answer 1

从event来电传入的triggerHandler不是真实的事件。它有preventDefault和stopPropogation作为无操作的方法。它没有任何其他内容，包括您正在访问的pageY到pageX属性。

这是一个小提琴叉形式，你的例子至少在调用triggerHandler方法时获取元素位置：http://jsfiddle.net/bonza_labs/ft1rm8v9/1/

（从这里获取元素位置代码：http://cvmlrobotics.blogspot.com/2013/03/angularjs-get-element-offset-position.html）

我认为这没有按预期工作（即盒子已创建，但不会立即“粘住”鼠标）

- 更新 -

具有元素的小提琴听小鼠移动事件（第63行）：http://jsfiddle.net/bonza_labs/ft1rm8v9/2/

只要它不偏离元素，它就会粘在光标上，但确实显示逻辑中有细节仍然可以解决，如何粘贴框（即光标创建后但是没有{ {1}} event）因为不会有mousedown而停止关注？

jqLite - .triggerHanlder（）行为无法按预期工作

1 个答案:

jqLit​​e - .triggerHanlder（）行为无法按预期工作

1 个答案:

jqLite - .triggerHanlder（）行为无法按预期工作