jQuery When Div is clicked go to url in a new tab, Except when Child item is Clicked

Question

I have a Div structure and when the div is clicked I want a link to open in a new tab. But there is a child item inside the div which has a function of copying the code. When this child item is clicked, it should not open the link in new tab.

This is my HTML structure:

 $(".nuget").on('click', ':not(.copy-nuget-section)', function (e) { window.open('http://google.pl', '_blank') });

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div class="product-item nuget"> <div class="product-image"> <img class="img-responsive add-shadow" alt="" src="/img/nuget-logo.png"> </div> <div class="product-info"> <h3>Install with <span>NuGet</span></h3> </div> <div class="copy-nuget-section" data-toggle="tooltip" data-placement="bottom" title="" data-original-title="Click to copy"> <div class="copy-nuget-row"> <pre class="install-script">Install-Package</pre> <div class="copy-button"> <button class="btn btn-default copy-nuget-script" type="button" data-toggle="popover" data-placement="bottom" data-content="Copied." aria-label="Copy the Package Manager command" data-original-title="" title=""> <span class="ms-Icon ms-Icon--Copy"></span> </button> </div> </div> </div> <div class="nuget-link">nuget.org/packages/</div> </div>

Answer 1

You can use the concept of event bubbling to stop the propagation of click event from child to parent like this.

$(".copy-nuget-section").on('click', function (e) {
   // code for the copy functionality that you want to implement
   e.stopPropagation()
});

$(".nuget").on('click', function (e) {
   window.open('http://google.pl', '_blank')
});

Answer 2

Check if the target is .copy-nuget-section or any of it's children using closest()

 $(".nuget").on('click', function(e) { if (!$(e.target).closest('.copy-nuget-section').length) { window.open('http://google.pl', '_blank') } });

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div class="product-item nuget"> <div class="product-image"> <img class="img-responsive add-shadow" alt="" src="/img/nuget-logo.png"> </div> <div class="product-info"> <h3>Install with <span>NuGet</span></h3> </div> <div class="copy-nuget-section" data-toggle="tooltip" data-placement="bottom" title="" data-original-title="Click to copy"> <div class="copy-nuget-row"> <pre class="install-script">Install-Package</pre> <div class="copy-button"> <button class="btn btn-default copy-nuget-script" type="button" data-toggle="popover" data-placement="bottom" data-content="Copied." aria-label="Copy the Package Manager command" data-original-title="" title=""> <span class="ms-Icon ms-Icon--Copy"></span> </button> </div> </div> </div> <div class="nuget-link">nuget.org/packages/</div> </div>