RxJS:我如何 event.preventDefault() 放置事件?
RxJS: How can I event.preventDefault() a drop event?
我的标记:
<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
回调吗? drop
和 dragover
都需要 preventDefault
来防止浏览器打开文件。
您只需要订阅您的 map
流。 map
所做的只是创建一个新的可观察对象,它将 运行 流上的 map
操作。但是你仍然需要订阅才能让它做一些事情:
dropStream
.map(function (event) {
console.log("hello");
return event.dataTransfer.files[0].path;
})
.subscribe(function (path) {
console.log("path=" + path);
});
我的标记:
<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
回调吗? drop
和 dragover
都需要 preventDefault
来防止浏览器打开文件。
您只需要订阅您的 map
流。 map
所做的只是创建一个新的可观察对象,它将 运行 流上的 map
操作。但是你仍然需要订阅才能让它做一些事情:
dropStream
.map(function (event) {
console.log("hello");
return event.dataTransfer.files[0].path;
})
.subscribe(function (path) {
console.log("path=" + path);
});