このJavaScriptコードをjQueryに翻訳するには？

Question

私はJavaScriptでいくつかのコードを持っています。これはjQueryに翻訳したいものです。私は数時間ネットをブラウズしていて、自分でそれを理解しようとしましたが、成功しませんでした。だから私はここに来た。

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

まず第一に、jQueryはJavaScriptです。

ほとんどの人は、プロジェクトにロードしないでオーバーヘッドを下げようとします。通常、要求はあなたが求めているものの反対です。このオーバーヘッドを減らす1つの方法は、ライト形式でjQueryをロードすることです。

しかし、それはjQueryがすべて悪いとは限りません。

短い構文の他に、jQueryについての特別なことは、どこから見ても、JavaScriptに多くの柔軟性をもたらし、プログラマーがjsの制限を理解できなくなっているということです。それは助けですが、それは制約です。たとえば、をコーディングする前にクロージャを覚える必要はありませんでした。なぜなら、jQueryは必要なときにいつでも自分のコンストラクトにそれらを自動的に追加するからです。

A明らかに陽性のものは、およそjQueryそれは1がに持っていないとautoprefixerはCSSを接頭辞の痛みのほとんどを奪うくらいのように、知っておく必要はありませんいくつかのブラウザの不整合のための癖や回避策を提供しています。

あなたのコードの合理化されたバージョンと思われるのは、jQueryです。既にjQueryをプロジェクトのIMHOにロードしている場合にのみ使用してください。

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

Answer 2

のjQueryのコードを翻訳はセンスがないのは、このコードは、もはや遅く、重いの依存関係があります。

$(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

次のコードを使用してみてください。

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