There is a block-link with info, when clicking on which you can go to another page, but in the same block there is also a button that opens a modal window. The problem is that the button is not clickable and when you click on it, the parent block link is immediately activated. How to make it clickable?

enter image description here

    3 answers 3

    It is necessary to hang the handler on the button and prohibit the event to stopPropagation() using stopPropagation() . Link: https://jsfiddle.net/pab9g0zx/2/

      Can do so

       <a href="#" id="somelink"> Ссылка <button>button</button> Ссылка </a> <script> document.getElementById('somelink').addEventListener('click', function(event) { if(event.target && event.target.tagName == 'BUTTON') { event.preventDefault() // .. тут открываешь модальное окно } }); </script>

      But honestly, you came up with some very strange crap

      • It’s not me that the designer came up with. Thank you - Sergey Bondarenko
      • A designer should not invent html code for you. Without looking at the layout, I’m almost sure that you can avoid such clowns with helicopters. But if it is impossible, then it is necessary to give such designers to the snout. - Vasya Shmarovoz

      It’s right not to put the button in the link:

       section { height: 4em; width: 16em; } a { display: block; height: 100%; background: green; cursor: pointer; } button { float: right; margin: .5em; height: 100%; height: calc(100% - 1em); } a:hover { background: blue; } 
       <section> <button>Button</button> <a></a> </section>