HTML Click handler for <embed> element

[cbreemer]

I have a page with an <embed> element that is displaying PDF files:

<embed id="Preview" type="application/pdf">

It works great but for some arcane reason I cannot put an onClick handler on this element. Well I can, but the function is never called.
To overcome this I had overlayed the <embed> with an <a> element and put the click handler on that anchor. This works beautifully, only I just noticed that now the mouse wheel no longer works to scroll the PDF.
Bit of a conundrum. Why can't I have it both ways ?

Anybody know why <embed> does not execute its mouse handler ? I would assume it's doing its own handling, but nothing at all happens when I click the mouse in it, so they might as well have let the event bubble up. Hmmm 🤔

 

[tomliv]

Sounds like the PDF is actually getting the click and not the embed. Can you achieve what you want with a button under the embed?

 

[cbreemer]

Sounds like the PDF is actually getting the click and not the embed. Can you achieve what you want with a button under the embed?

I'm not sure how the PDF would be "getting the click", and how it would react to it, being just a file without code (or so I assume, you never know...).
Anyway yes, I could find something else to click on if the <embed> does want to play ball. There's always another way. I'd just like to understand why it does not seem possible.

 

[JamesCobban_net]

You must understand that the PDF is not being displayed by your browser, but rather by a PDF viewer application which the browser has invoked. That application has established a handler for click events in order to implement the dynamic functionality supported by PDF. That is PDF is not "just a file without code"/ Note that is a reason why you should never open a PDF attachment to an e-mail unless you previously requested the known originator to send you a PDF. For example if you had a link in the PDF, you could click on that link. The trick is to overlay a transparent div tag over the embed tag. But remember that means that your users cannot access the PDF document itself. Alternatively you could export the PDF to JPEG, which has no local function of its own.

 

[Ghost]

What others have said is 100% true.

A PDF (or most content in an embed) is going to need click/scroll/hover/etc events. This overrides the default site, because you are EMBEDDING a different "experience" (pdf, etc) into your site. The reason it doesn't work is because it's counterintuitive to have an embed that you would have a separate click event on.

Are you 100% sure an embed is what you want? What's the purpose of the click event btw? If you can share a bit more info I'm sure we can help you come up with some great UX that makes sense for your use case without breaking your PDF interactivity 🙂

 

[cbreemer]

You must understand that the PDF is not being displayed by your browser, but rather by a PDF viewer application which the browser has invoked. That application has established a handler for click events in order to implement the dynamic functionality supported by PDF. That is PDF is not "just a file without code"/ Note that is a reason why you should never open a PDF attachment to an e-mail unless you previously requested the known originator to send you a PDF. For example if you had a link in the PDF, you could click on that link. The trick is to overlay a transparent div tag over the embed tag. But remember that means that your users cannot access the PDF document itself. Alternatively you could export the PDF to JPEG, which has no local function of its own.

Thanks for that. Yes I guess there is more to PDF than I reckoned with. Overlaying a <div> is exactly what I now have to make the click possible.

 

[cbreemer]

What others have said is 100% true.

A PDF (or most content in an embed) is going to need click/scroll/hover/etc events. This overrides the default site, because you are EMBEDDING a different "experience" (pdf, etc) into your site. The reason it doesn't work is because it's counterintuitive to have an embed that you would have a separate click event on.

Are you 100% sure an embed is what you want? What's the purpose of the click event btw? If you can share a bit more info I'm sure we can help you come up with some great UX that makes sense for your use case without breaking your PDF interactivity 🙂

Thanks @Ghost . Yes I know it's a plugin handling the PDF, not the browser itself. My pdf's are invoices, manuals, official documents and such. I don't need interactivity, just the ability to view them. For illustration a screenshot of my page. Documents can be displayed filtered by kind, name and/or text content, a preview of the currently selected document is shown in an <embed> element, and clicking on that (or rather, on the overlayed <div>) will show the document in a new window. I'm very happy with that setup except for the small niggle that I cannot use the mouse wheel in the <embed>.

 

[Ghost]

Thanks @Ghost . Yes I know it's a plugin handling the PDF, not the browser itself. My pdf's are invoices, manuals, official documents and such. I don't need interactivity, just the ability to view them. For illustration a screenshot of my page. Documents can be displayed filtered by kind, name and/or text content, a preview of the currently selected document is shown in an <embed> element, and clicking on that (or rather, on the overlayed <div>) will show the document in a new window. I'm very happy with that setup except for the small niggle that I cannot use the mouse wheel in the <embed>.
View attachment 2594

Ah yeah, this is tricky.

What I suggest should work here:
- on the div, add CSS "pointer-events: none;" on your overlay (transparent) div. This should let scrolls pass through the div, into the PDF.

- but keep the click event in place

Let me know if this works 🙂

 

[cbreemer]

• on the div, add CSS "pointer-events: none;" on your overlay (transparent) div. This should let scrolls pass through the div, into the PDF.
• but keep the click event in place

Let me know if this works 🙂

Thanks, that seemed worth a try. But alas it does not make any difference whatsoever.

But it's fine, I am quite used to how it works by now. What I mostly do anyway is click on the preview and then view the document in the new window, where everything just works. So it's quite a moot point really, let's drop it. Thanks for your help though !

 

[tomliv]

Ah yeah, this is tricky.

What I suggest should work here:
- on the div, add CSS "pointer-events: none;" on your overlay (transparent) div. This should let scrolls pass through the div, into the PDF.

- but keep the click event in place

Let me know if this works 🙂

Removing pointer-events will stop the click as well. Here is a test:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        button{
            padding: 20px;
            outline:1px solid grey;
        }
        .nopointerevents{
            padding: 20px;
            outline:1px solid grey;
            pointer-events: none;
        }
    </style>
</head>
<body>
    
    <button onclick="myFunction()">Click me!</button>
    <button class="nopointerevents" onclick="myOtherFunction()">Click me too if you can!</button>
    
    <p id="demo"></p>
    <p id="demotoo"></p>
    
    <script>
        function myFunction() {
              document.getElementById("demo").innerHTML = "Hello World";
        }
        function myOtherFunction() {
              document.getElementById("demotoo").innerHTML = "No dice!";
        }
    </script>
</body>
</html>

 

[cbreemer]

Removing pointer-events will stop the click as well. Here is a test:

Thanks for chipping in. What you write seems to make sense although I can't remember noticing that.

Anyway, let's consider the issue closed. I'm happy with how it works now.