如何使用自定义事件(特别是自定义dataTransfer属性)触发事件? [英] How to trigger an event with a custom event (specifically a custom dataTransfer property)?
问题描述
我目前正在尝试测试一些使用拖放的代码.我发现了一些与此相关的其他问题，但是这些问题太具体了而无法帮助我，或者相关性不够.
I'm currently attempting to test some code that uses drag-and-drop. I found some other questions that were kinda related to this, but they were way too specific to help me, or not related enough.
这是一个测试，我正在努力尝试自动执行.on('drop',function(e){....}事件中的代码.主要问题不是我无法在其中运行代码，而是我无法传输dataTransfer属性，并且由于它是只读的，因此我似乎无法伪造它.无论如何，有没有要伪造dataTransfer属性或以其他方式解决?
This being a test, I'm struggling on trying to automatically execute code inside a .on('drop',function(e){....} event. The main issue is not that I can't run the code inside, but it's that I can't transfer the dataTransfer property, and I can't seem to fake it because it's read-only. Is there anyway to fake the dataTransfer property or otherwise get around it?
我想到了这个JSFiddle，它是我要尝试做的事情的模板: https: //jsfiddle.net/gnq50hsp/53/
I came up with this JSFiddle that serves as a template of what I'm trying to do: https://jsfiddle.net/gnq50hsp/53/
基本上，如果您能够向我解释(如果有可能的话)我怎么可能伪造dataTransfer属性，那么我应该已经准备就绪.
Essentially if you are able to explain to me (if this is at all possible) how I can possibly fake the dataTransfer property, I should be all set.
旁注:
-
我完全乐于接受以其他方式进入该代码的其他方式，例如，也许可以触发事件并使用伪造的dataTransfer对象传递伪造的事件对象.
I'm totally open to other ways of somehow getting inside that code, like for example, maybe its possible to trigger the event and pass in a fake event object with a fake dataTransfer object.
要查看拖放行为，请将JavaScript加载类型从no-wrap head更改为on-Load，然后您应该看到我要模拟的内容.
To see the drag-drop behavior, change the JavaScript load type from no-wrap head to on-Load, then you should see what I'm trying to simulate.
重要的一点是，我无法修改事件处理程序内部的任何代码，只能在外部函数内部进行修改
使用Karma/Jasmine，因此还可以使用间谍之类的工具
Using Karma/Jasmine so use of those tools are also possible like spies
此外，我正在使用Chrome.
Also, I'm using Chrome.
在此先感谢您的任何疑问/澄清！
Thanks in advance, and let me know for any questions/clarifications!
推荐答案
您应该能够使用 Object.defineProperty 覆盖几乎所有您想要的东西.根据您要测试的内容，它可能非常简单也可能非常复杂.伪造dataTransfer可能会有些棘手，因为与它相关的约束和行为很多，但是如果您只是想测试drop函数，那很容易.
You should be able to override pretty much everything you want using Object.defineProperty. Depending on what you want to test it can be very simple or very complex. Faking the dataTransfer can be a bit tricky, since there's a lot of restrictions and behaviors linked to it, but if you simply want to test the drop function, it's fairly easy.
这是一种方法，这应该为您提供一些有关如何伪造某些事件和数据的想法:
Here's a way, this should give you some ideas as to how to fake some events and data:
//Event stuff
var target = $('#target');
var test = $('#test');
test.on('dragstart', function(e) {
e.originalEvent.dataTransfer.setData("text/plain", "test");
});
target.on('dragover', function(e) {
//e.dataTransfer.setData('test');
e.preventDefault();
e.stopPropagation();
});
target.on('dragenter', function(e) {
e.preventDefault();
e.stopPropagation();
});
//What I want to simulate:
target.on('drop', function(e) {
console.log(e)
//Issue is that I can't properly override the dataTransfer property, since its read-only
document.getElementById('dataTransferDisplay').innerHTML = e.originalEvent.dataTransfer.getData("text");
});
function simulateDrop() {
// You'll need the original event
var fakeOriginalEvent = new DragEvent('drop');
// Using defineProperty you can override dataTransfer property.
// The original property works with a getter and a setter,
// so assigning it won't work. You need Object.defineProperty.
Object.defineProperty(fakeOriginalEvent.constructor.prototype, 'dataTransfer', {
value: {}
});
// Once dataTransfer is overridden, you can define getData.
fakeOriginalEvent.dataTransfer.getData = function() {
return 'test'
};
// TO have the same behavior, you need a jquery Event with an original event
var fakeJqueryEvent = $.Event('drop', {
originalEvent: fakeOriginalEvent
});
target.trigger(fakeJqueryEvent)
}
https://jsfiddle.net/0tbp4wmk/1/
这篇关于如何使用自定义事件(特别是自定义dataTransfer属性)触发事件?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
