I want the button inside the .container
to be clickable, even though it has the pointer-events:none
property.
The context is this: in my real code, I must prevent that a parent div (something to the style of the div that has the class .container
) cannot be dragged, or click pressed and dragged somewhere.
I think if there is a way to solve this, my problem is solved. this is my code:
function myFunction(){ alert("click") }
.container{ width:30vh; height:30vw; background:red; display:flex; justify-content:center; align-items:center; pointer-events:none; }
<div class="container"> <button onclick="myFunction()">click</button> </div>
Advertisement
Answer
Add pointer-events: all
or pointer-events: auto
to the style of your button.
function myFunction(){ alert("click") }
.container{ width:30vh; height:30vw; background:red; display:flex; justify-content:center; align-items:center; pointer-events:none; } .container button{ pointer-events: all; }
<div class="container"> <button onclick="myFunction()">click</button> </div>