onclick for

Question

I want to embed a web page in to my website and be able to listen for clicks on the element.

<object id="test" class="col-xs-12 col-md-10" type="text/html" data="http://validator.w3.org/" style="margin-top: -5px;" height="580px">Your browser sucks!</object>

I have tried adding onclick to it. I have tried using .click function event in script.
I have tried wrapping the <object> in a <div> but any clicks in the <object> are not seen.
I have even used body and window click functions - it's as if <object> element no longer exists on my website, only clicks outside the <object> work.
The same behaviour also happens on iframes.

add parent div and put **onclick** on div – Mohammad Javad Noori Jan 31 '18 at 10:18 — Mohammad Javad Noori, Jan 31 '18 at 10:18
MJN - check my question, already tried that. – Danny Keeley Jan 31 '18 at 10:40 — Danny Keeley, Jan 31 '18 at 10:40

score 1 · Answer 1 · answered Jan 31 '18 at 10:16

1

Try adding pointer-events: none; to your object element.

answered Jan 31 '18 at 10:16

Roberto Zvjerković

9,657
4
26
47

onclick still doesnt work with this but I still need the embedded website to be interactable – Danny Keeley Jan 31 '18 at 10:39

score 0 · Answer 2 · answered Sep 16 '21 at 06:17

0

What for me worked was adding pointers-events: none; to the style of the object.

Also tried adding a parent <div> container and playing around with z-index. Both didn't work for me.

answered Sep 16 '21 at 06:17

Stagory

24
3

score 0 · Answer 3 · answered Jul 28 '23 at 06:58

I used this structure to solve the click problem

<div class="icon">
  <object type="image/svg+xml" data="xxx"></object>
  <div class="click-layer" @click="alert('hello')"></div>
</div>

<style>
.icon {
  position: relative;
}
.icon .click-layer {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background: transparent;
}
</style>

3 Answers3