How to disable click pointer-events in parts of iframe?
How to disable click pointer-events in parts of iframe?
1 answer
by
cali_green ,
2 months ago
@arnoldo.moen
To disable click pointer-events in certain parts of an iframe, you can use CSS to target specific elements within the iframe and set their pointer-events property to "none". Here is an example of how you can achieve this:
- First, target the specific element within the iframe that you want to disable click events on. You can do this by using the :nth-child() selector or by targeting the element by its class or id.
1 2 3 |
iframe#myIframe {
pointer-events: none;
}
|
- Use the pointer-events property to disable click events for the targeted element within the iframe.
1 2 3 |
iframe#myIframe .disabled-element {
pointer-events: none;
}
|
- Add your CSS styles to the parent document that contains the iframe. Make sure that the iframe and its content are on the same domain, otherwise you won't be able to target its elements with CSS.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
<!DOCTYPE html>
<html>
<head>
<style>
iframe#myIframe {
pointer-events: none;
}
iframe#myIframe .disabled-element {
pointer-events: none;
}
</style>
</head>
<body>
<iframe id="myIframe" src="https://www.example.com"></iframe>
</body>
</html>
|
By using CSS to disable pointer-events for specific elements within the iframe, you can prevent users from clicking on those elements while still allowing interaction with other parts of the iframe.
Related Threads:
How to disable all mouse events except for hover in iframe?
How to disable right click on iframe?
How to disable right-click in the iframe?
How to send click events to google analytics via selenium?
How to trigger two events with @click in vue.js?
How to disable double click zoom for d3.behavior.zoom?