Chrome加载图像时拖动，即使在angular指令中的preventDefault()

Chrome loading image on drag even with preventDefault() in angular directive

本文关键字：指令 angular preventDefault 图像 加载 拖动 Chrome      更新时间：2023-09-26

我有一个问题，angular指令不阻止默认的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在新选项卡中不加载图像。什么好主意吗?

您还应该在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();
      });
    }
  };
});
相关文章：