Comment déclencher un événement avec un événement personnalisé (en particulier une propriété personnalisée de transfert de données)?

Vous devriez pouvoir annuler tout ce que vous voulez en utilisant Object.defineProperty . Selon ce que vous voulez tester, cela peut être très simple ou très complexe. Le fait de falsifier le transfert de données peut être un peu délicat, car il y a beaucoup de restrictions et de comportements liés, mais si vous voulez simplement tester la fonction de suppression, c'est assez facile.

Voici une façon, cela devrait vous donner quelques idées quant à la fausse idée de certains événements et données:

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

Selon le lien jsfiddel, vous souhaitez obtenir une fonctionnalité de glisser-déposer. JQuery Draggable UI fournit déjà cette fonctionnalité pour laquelle vous ne pouvez pas l'utiliser?

Pour créer un événement personnalisé sur votre chemin, vous devez suivre deux variantes

 $('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" ] ); 

Sur l'exemple ci-dessus

Dans le monde des événements personnalisés, il existe deux méthodes jQuery importantes: .on () et .trigger (). Dans le chapitre Événements, nous avons vu comment utiliser ces méthodes pour travailler avec des événements utilisateur; Pour ce chapitre, il est important de se souvenir de deux choses:

La méthode .on () prend un type d'événement et une fonction de gestion des événements comme arguments. En option, il peut également recevoir des données liées à l'événement comme deuxième argument, poussant la fonction de gestion des événements vers le troisième argument. Toutes les données transmises seront disponibles pour la fonction de gestion des événements dans la propriété de données de l'objet événement. La fonction de gestion des événements reçoit toujours l'objet événement comme son premier argument.

La méthode .trigger () prend un type d'événement comme argument. En option, il peut également prendre une gamme de valeurs. Ces valeurs seront passées à la fonction de gestion des événements comme arguments après l'objet événement.

Voici un exemple de l'utilisation de .on () et .trigger () qui utilise des données personnalisées dans les deux cas:

OU

 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" ); }); 

Sur l'exemple ci-dessus

Cet événement spécial multiclick mène à un événement de clic standard, mais utilise un crochet de poignée afin qu'il puisse surveiller l'événement et ne le livrer que lorsque l'utilisateur clique sur l'élément un multiple du nombre de fois spécifié lors de la liaison de l'événement.

Le crochet enregistre le nombre de clics actuel dans l'objet de données, de sorte que les gestionnaires multiclick sur différents éléments n'interfèrent pas les uns avec les autres. Il modifie le type d'événement au type multiclick original avant d'appeler le gestionnaire et le restaure au type de "clic" mappé avant de revenir: