Jak wywołać zdarzenie z niestandardowym zdarzeniem (w szczególności niestandardową właściwością dataTransfer)?

Question

Aktualnie próbuję przetestować kod, który używa metody przeciągnij i upuść. Znalazłem kilka innych pytań, które były z tym związane, ale były zbyt konkretne, by mi pomóc, lub nie były wystarczająco powiązane.

Będąc testem, próbuję automatycznie wykonać kod wewnątrz zdarzenia .on('drop',function(e){....}. Głównym problemem nie jest to, że nie mogę uruchomić kodu wewnątrz, ale nie mogę przenieść właściwości dataTransfer i nie mogę tego udawać, ponieważ jest to plik tylko do odczytu. Czy mimo to można oszukać właściwość dataTransfer lub w inny sposób ominąć ją?

wymyśliłem tego JSFiddle który służy jako szablon, co próbuję zrobić: https://jsfiddle.net/gnq50hsp/53/

Zasadniczo, jeśli jesteś w stanie mi wyjaśnić (jeśli to w ogóle możliwe), jak mogę ewentualnie podrobić właściwość dataTransfer, powinienem wszystko ustawić.

notatki uboczne:

• jestem całkowicie otwarty na inne sposoby jakoś się wewnątrz tego kodu, jak na przykład, może jej to możliwe, aby wywołać zdarzenie i przechodzą w fałszywej obiektu zdarzenia z fałszywy obiekt dataTransfer.

• Aby zobaczyć zachowanie przeciągnij-upuść, zmienić typ obciążenia JavaScript z no-wrap head do on-Load, to należy sprawdzić, co próbuję symulować.

• Ważne, aby pamiętać, że nie można modyfikować kodu wewnątrz obsługi zdarzeń, tylko wewnątrz funkcji poza

• Korzystanie Karma/Jasmine więc stosowanie tych narzędzi możliwe jak szpiedzy są również

• Korzystam też z Chrome.

Z góry dziękuję i daj mi znać na wszelkie pytania/wyjaśnienia!

Answer 1

powinien być w stanie zastąpić prawie wszystko, co chcesz za pomocą Object.defineProperty. W zależności od tego, co chcesz przetestować, może być bardzo proste lub bardzo złożone. Podrabianie danych Transfer może być nieco skomplikowany, ponieważ wiąże się z nim wiele ograniczeń i zachowań, ale jeśli po prostu chcesz przetestować funkcję upuszczania, jest to dość łatwe.

Oto sposób, to powinno dać Ci kilka pomysłów, jak udawać niektóre zdarzenia i dane:

//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/

Answer 2

Jako link jsfiddel chcesz uzyskać funkcję przeciągnij i upuść. jQuery Draggable UI zapewnia już tę funkcję, dlaczego nie można jej użyć?

Aby utworzyć niestandardowe zdarzenie na drodze trzeba przestrzegać dwa alternatywne sposoby

$('your selector').on("myCustomEvent", { 
    foo: "bar" 
}, function(event, arg1, arg2) { 
    console.log(event.data.foo); // "bar" 
    console.log(arg1);   // "bim" 
    console.log(arg2);   // "baz" 
}); 

$(document).trigger("myCustomEvent", [ "bim", "baz" ]); 

na powyższy przykład

W świecie zdarzeń niestandardowych, istnieją dwie ważne metody jQuery: .Na() i .trigger(). W rozdziale Wydarzenia zobaczyliśmy, jak używać tych metod do pracy ze zdarzeniami użytkowników; w tym rozdziale należy pamiętać o dwóch rzeczach:

. Metoda (on) przyjmuje jako typ argumentów typ zdarzenia i funkcję obsługi zdarzeń. Opcjonalnie może również odbierać dane związane z wydarzeniem jako swój drugi argument, przesuwając funkcję obsługi zdarzeń do trzeciego argumentu. Wszystkie przekazane dane będą dostępne dla funkcji obsługi zdarzeń we właściwości data obiektu zdarzenia.Funkcja obsługi zdarzeń zawsze otrzymuje obiekt zdarzenia jako swój pierwszy argument.

. Metoda trigger() przyjmuje jako typ argumentu typ zdarzenia. Opcjonalnie może również przyjąć szereg wartości. Wartości te zostaną przekazane do funkcji obsługi zdarzeń jako argumenty po obiekcie zdarzenia.

Oto przykład z wykorzystaniem .on() i .trigger(), która wykorzystuje dane na obydwu przypadkach:

lub

jQuery.event.special.multiclick = { 
    delegateType: "click", 
    bindType: "click", 
    handle: function(event) { 
     var handleObj = event.handleObj; 
     var targetData = jQuery.data(event.target); 
     var ret = null; 

     // If a multiple of the click count, run the handler 
     targetData.clicks = (targetData.clicks || 0) + 1; 

     if (targetData.clicks % event.data.clicks === 0) { 
      event.type = handleObj.origType; 
      ret = handleObj.handler.apply(this, arguments); 
      event.type = handleObj.type; 
      return ret; 
     } 
    } 
}; 

// Sample usage 
$("p").on("multiclick", { 
    clicks: 3 
}, function(event) { 
    alert("clicked 3 times"); 
}); 

W powyższym przykładzie

To zdarzenie specjalne z numerem multiclick mapuje się w standardowe zdarzenie kliknięcia, ale wykorzystuje uchwyt przechwytywania, dzięki czemu może monitorować zdarzenie i dostarczać je tylko wtedy, gdy użytkownik kliknie. n element wielokrotność liczby razy określonej podczas wiązania zdarzeń.

Haczyk przechowuje aktualną liczbę kliknięć w obiekcie danych, więc multiclick obsługujące różne elementy nie zakłócają się nawzajem. Zmienia typ zdarzenia do oryginalnego multiclick typu przed wywołaniem obsługi i przywraca go do odwzorowanego typu „click” przed powrotem: