JSFiddle - React, Tailwind, and code Playground

HTML

<div class="layer">
    <a href="#">clicking this should not fire the $('.layer').click() event, only the $('.layer').focusin(). But $('.layer').click() does wrongly fire in webkit browser, so I need .focus() to work since it cares not what elements are under the focused element, but it also does not work in webkit browsers on layers</a> 
</div>    



<input type="textarea" value="some text" />

CSS

.layer
{
    height: 455px;
    width: 455px;
    background-color: orange;
}


input 
{
width: 90px;
height: 90px;    
}

JavaScript

$('input').on("click",function() {alert('infocus-input'); });

$('.layer').on("focusin",function() {alert('infocus-layer'); });

$('.layer').on("click",function() {
alert('This message should not be popping up when clicking on the link');
});