javascript - RxJS:我怎样才能使用 event.preventDefault() 来处理掉落事件？

Question

我的标记:

<section id="drop-target">
  Drop file here...
</section>

我的代码:

var dropTarget = document.getElementById('drop-target');

Rx.Observable.fromEvent(dropTarget, 'dragover').subscribe(function(event) {
  event.preventDefault();
});

var dropStream = Rx.Observable.fromEvent(dropTarget, 'drop');

dropStream.subscribe(function(event) {
  console.log('This will be called.');
  event.preventDefault();
});

dropStream.map(function(event) {
  console.log('This will not be called.');
  return event.dataTransfer.files[0].path;
});

知道如何调用我的最后一个 map 回调吗？我需要 preventDefault 用于 drop 和 dragover 以防止浏览器打开文件。

Answer 1

您只需要订阅您的 map 流。 map 所做的就是创建一个新的可观察对象，它将在流上运行 map 操作。但是你仍然需要订阅才能让它做一些事情:

dropStream
    .map(function (event) {
        console.log("hello");
        return event.dataTransfer.files[0].path;
    })
    .subscribe(function (path) {
        console.log("path=" + path);
    });