How can I disable click but still allow scrolling in an iframe? code example

Example: how to disable click inside iframe

You can try styling it with


If you need to get a click listener over it however,
you can add a transparent overlay on it
and attach the click listener to the overlay.</code></pre>
                    </div>
                </article>
                <div class="tags mt-2">
                    <h3 class="txt">Tags:</h3>
                                            <h4 class="item-tag">
                            <a href="https://newbe.dev/t/misc-example" title="Misc Example">Misc Example</a>
                        </h4>
                                    </div>
                <div class="pt-2">
                    <div><h2>Related</h2>
                        <div class="related-posts">
                                                            <a href="https://newbe.dev/python-plot-point-size-code-example"
                                   class="overflow-hidden">python plot point size code example</a>
                                                            <a href="https://newbe.dev/boilerplate-htmls-code-example"
                                   class="overflow-hidden">boilerplate htmls code example</a>
                                                            <a href="https://newbe.dev/devtools-failed-to-load-sourcemap-could-not-load-content-for-chrome-extension-ljjemllljcmogpfapbkkighbhhppjdbg-build-util-js-map-http-error-status-code-404-net-err-unknown-url-scheme-code-example"
                                   class="overflow-hidden">DevTools failed to load SourceMap: Could not load content for chrome-extension://ljjemllljcmogpfapbkkighbhhppjdbg/build/util.js.map: HTTP error: status code 404, net::ERR_UNKNOWN_URL_SCHEME code example</a>
                                                            <a href="https://newbe.dev/indexing-strings-java-code-example"
                                   class="overflow-hidden">indexing strings java code example</a>
                                                            <a href="https://newbe.dev/git-clean-local-branches-not-on-remote-code-example"
                                   class="overflow-hidden">git clean local branches not on remote code example</a>
                                                            <a href="https://newbe.dev/php-copy-file-and-move-code-example"
                                   class="overflow-hidden">php copy file and move code example</a>
                                                            <a href="https://newbe.dev/submit-button-in-react-code-example"
                                   class="overflow-hidden">submit button in react code example</a>
                                                            <a href="https://newbe.dev/how-to-check-if-a-string-is-lowercase-in-python-code-example"
                                   class="overflow-hidden">how to check if a string is lowercase in python code example</a>
                                                            <a href="https://newbe.dev/select2-json-data-example"
                                   class="overflow-hidden">select2 json data example</a>
                                                            <a href="https://newbe.dev/jest-tohavebeencalled-code-example"
                                   class="overflow-hidden">jest toHaveBeenCalled code example</a>
                                                            <a href="https://newbe.dev/java-script-oop-code-example"
                                   class="overflow-hidden">java script OOp code example</a>
                                                            <a href="https://newbe.dev/how-to-use-string-as-a-function-template-code-example"
                                   class="overflow-hidden">how to use string as a function template code example</a>
                                                    </div>
                    </div>
                </div>
            </div>
            <div class="mt-5 mt-lg-0 right-sidebar flex-grow-1 flex-lg-grow-0">
                <div class="crayons-card crayons-card--secondary">
                    <header class="crayons-card__header"><h3 class="crayons-subtitle-2">Recent Posts</h3></header>
                    <div>
                                                    <a href="https://newbe.dev/pandas-how-to-find-column-contains-a-certain-value" class="crayons-link crayons-link--contentful">
                                Pandas how to find column contains a certain value
                            </a>
                                                    <a href="https://newbe.dev/recommended-way-to-install-multiple-python-versions-on-ubuntu-20-04" class="crayons-link crayons-link--contentful">
                                Recommended way to install multiple Python versions on Ubuntu 20.04
                            </a>
                                                    <a href="https://newbe.dev/build-super-fast-web-scraper-with-python-x100-than-beautiful-soup" class="crayons-link crayons-link--contentful">
                                Build super fast web scraper with Python x100 than BeautifulSoup
                            </a>
                                                    <a href="https://newbe.dev/how-to-convert-an-sql-query-result-to-a-pandas-data-frame-in-python" class="crayons-link crayons-link--contentful">
                                How to convert a SQL query result to a Pandas DataFrame in Python
                            </a>
                                                    <a href="https://newbe.dev/how-to-write-a-pandas-data-frame-to-a-csv-file-in-python" class="crayons-link crayons-link--contentful">
                                How to write a Pandas DataFrame to a .csv file in Python
                            </a>
                                            </div>
                </div>
            </div>














        </div>
    </div>

        <footer class="pd-3 pd-md-5">
            <div>
                <div class="p-2 p-md-4 text-center"><span>© 2021 newbedev</span><a href="/p/privacy"
                                                                                   class="ml-3">Privacy Policy</a></div>
            </div>
        </footer>
    </div>
</div>
    <div id="g_id_onload"
         data-client_id="5503047233-647fcja6dp2ui6qgf6ju6psqbeakoll4.apps.googleusercontent.com"
         data-login_uri="https://newbe.dev/google_login"
                     
    >
    </div>



























    <script type="text/javascript">
        var b = '<div class="copy-btn"><a href="javascript:;" class="copy-pre"><image class="copy-image" ' +
            'src="/images/content-copy-icon.svg" ><span ' +
            'class="tooltiptext">Click to copy</span></a></div>';
        var pre = document.getElementsByTagName('pre');
        for(var i = 0, max = pre.length; i < max; i++) {
            var el = pre[i]
            el.insertAdjacentHTML("beforebegin", b);
        }
        const divs = document.querySelectorAll('.copy-pre');
        divs.forEach(el => el.addEventListener('click', event => {
            var d = el.parentElement.nextSibling
            var c = document.createRange();
            c.selectNodeContents(d);
            var e = window.getSelection();
            e.removeAllRanges();
            e.addRange(c);
            document.execCommand("copy");
            var span = el.querySelector('span');
            span.innerText = 'Copied'
        }));
    </script>

    <script async src="https://www.googletagmanager.com/gtag/js?id=UA-126228416-1"></script>
    <script>
        window.dataLayer = window.dataLayer || [];
        function gtag(){dataLayer.push(arguments);}
        gtag('js', new Date());

        gtag('config', 'UA-126228416-1');
    </script>
</body>
</html>
<script data-cfasync="false" src="/cdn-cgi/scripts/5c5dd728/cloudflare-static/email-decode.min.js"></script>