Comment traduire ce code JavaScript en jQuery?

Question

J'ai du code en JavaScript, que j'aimerais traduire en jQuery. J'ai navigué sur le net pendant quelques heures maintenant et j'ai essayé de comprendre par moi-même, mais sans succès. Donc je suis venu ici.

window.addEventListener('mouseup', function(event){ 
    var dp1 = document.getElementById('dp1'); 
    if(event.target != dp1 && event.target.parentNode != dp1){ 
     dp1.style.height = "0px"; 
     dp1.style.width = "0px"; 
    } 
}); 

Answer 1

Tout d'abord, jQuery est JavaScript.

La plupart des gens essaient de ne pas le charger dans leurs projets, pour réduire les frais généraux qu'il apporte donc, habituellement, la demande est le contraire de ce que vous demandez. Une façon de réduire cette surcharge est de charger jQuery sous sa forme allégée. Mais cela ne veut pas dire jQuery est tout mauvais.

plus de la syntaxe plus courte, la particularité de jQuery, son meilleur et le pire caractéristique, selon l'endroit où vous regardez de, est qu'il apporte beaucoup de flexibilité pour JavaScript et empêche des programmeurs de comprendre js limites. C'est de l'aide, mais c'est une contrainte. Par exemple, je n'ai jamais eu besoin d'apprendre les fermetures avant de coder JavaScript propre, parce que jQuery les ajouterait silencieusement à mes constructions quand elles seraient nécessaires.

Une chose clairement positive au sujet jQuery est-il fournit des bizarreries et des solutions de contournement pour quelques incohérences navigateur l'on n'a pas et ne devrait pas avoir besoin de connaître, un peu comme autoprefixer enlève plus de la douleur de préfixer CSS. Cela étant dit, voici ce que je crois être une version rationalisée de votre code, en jQuery. Vous ne devez l'utiliser que si vous chargez déjà jQuery dans votre projet, à mon humble avis.

$(window).on('mouseup', function(e){ 
    if (! $(e.target).closest('#dp1').is('#dp1')) { 
    $('#dp1').css({ 
     height: 0, 
     width: 0 
    }) 
    } 
}) 

Answer 2

Traduire le code jQuery n'a pas de sens, ce code est plus, plus lent et a beaucoup de dépendances:

$(window).on("mouseup", function(event) { 
    var dp1 = $('#dp1'); 
    if(this != dp1.get(0) && $(this).parent().get(0) != dp1.get(0)){ 
     dp1.css("height", "0px"); 
     dp1.css("width", "0px"); 
    } 
}); 

Answer 3

essayer avec le code suivant.

$(document).mouseup(function(event){ 
    var dp1 = $('#dp1'); 
    if(event.target != dp1 && event.target.parentNode != dp1){ 
    dp1.css({height:'0px', width:'0px'}); 
    } 
}); 

Answer 4

$(document).ready(function() { 
    $(window).on("mouseup", function(event) { 
    var dp1 = $("#dp1"); 
    var target = $(event.target); 

    if(!$(target).is(dp1) && !target.parents('#dp1').length) { 
     dp1.css("height", "0").css("width", "0"); 
    } 
    }); 
});