javascript - 即使在 Angular Directive(指令)中使用preventDefault()，Chrome也会在拖动时加载图像

Question

我遇到了 Angular Directive(指令)问题，该指令无法阻止默认的 chrome 操作。

这是我的指令

app.directive('fileDrag', function () {
  return {
    restrict: 'A',
    link: function (scope, elem, attrs) {
      elem.bind('drop', function(e){
        e.preventDefault();
        console.log(e);
        return false;
      });
    }
  };
});

还有我的 html

<div style="width: 500px; height:500px; background-color: red;" file-drag></div>

当拖动到元素上时，我似乎无法让 Chrome 不在新选项卡中加载图像。有什么想法吗？

Answer 1

您还应该在 dragover 事件上 preventDefault，因此将代码更改为:

app.directive('fileDrag', function () {
  return {
    restrict: 'A',
    link: function (scope, elem, attrs) {
      elem.bind('drop', function(e){
        e.preventDefault();
        console.log(e);
        return false;
      });
      elem.bind('dragover', function(e){
        e.preventDefault();
      });
    }
  };
});