Groups | Search | Server Info | Keyboard shortcuts | Login | Register [http] [https] [nntp] [nntps]

Groups > comp.lang.javascript > #38425

Re: HTML5 embed element event

Show all headers | View raw

rcpj@panix.com (Pierre Jelenc) wrote on 20 May 2020 in comp.lang.javascript:

>>>> <style>
>>>>    div {position:relative;width:300px;height:200px;border:2px black
>>>>    solid;} embed {background:#eef;}
>>>>    embed, div div
>>>>    {position:absolute;width:300px;height:200px;border:0;} 
>>>> </style>
>>>> 
>>>> <div>
>>>> <embed src="test.txt">
>>>> <div onclick='alert("clicked");'></div>
>>>> </div>
>>> 
>>> It's nice idea but as it's a PDF I'd expect users to want to interact 
>>> with it.
>>
>>Your expectations are irreal.
>>
>>You can't have it both ways, detecting a mouseclick, 
>>and having mouseclicks going on to the pdf.
> 
> How about if you detect the click that way, and trigger a script that 
> pushes the transparent div to a negative z-index? Then (if it works) use 
> onblur() to bring the div back to the front. (Completely untried...)

You can toggle CSS style 'pointer-events:none|all;' 
to have all mouse-events fall through the top-element:

==========================================
<style>
  * {box-sizing: border-box;}
  span {color:#f00;}

  container, divTop, divBot {display:block;width:300px;height:200px;}
  container {position:relative;border:2px black solid;}
  divTop, divBot {position:absolute;margin:10%;}
</style>

<script>
const qs = (s) => document.querySelector(s);

const fallTrough = (x) => {
	const X = qs(x);
	X.style.pointerEvents = 
		(X.style.pointerEvents == 'none')
		? 'auto'
		: 'none';
	X.innerHTML = '<br><br>Top {pointer-events: ' + X.style.pointerEvents 
+'}';
};

const show = (y) => {
	qs('span').innerHTML = 'div' + y + ' clicked';
	setTimeout('qs("span").innerHTML = "---"',1000);
};
</script>


<container>
<divBot onclick='show("bottom");'>Bottom</divBot>
<divTop onclick='show("top");'><br><br>Top {pointer-events: auto}</divTop>
</container>
<br><br>
<button onclick='fallTrough("divTop")'>Toggle</button>
<span>---</span>
==========================================

-- 
Evertjan.
The Netherlands.
(Please change the x'es to dots in my emailaddress)

Back to comp.lang.javascript | Previous | Next — Previous in thread | Next in thread | Find similar | Unroll thread

Thread

HTML5 embed element event Andrew Poulos <ap_prog@hotmail.com> - 2020-05-19 16:39 +1000
  Re: HTML5 embed element event "Evertjan." <exxjxw.hannivoort@inter.nl.net> - 2020-05-19 17:29 +0200
    Re: HTML5 embed element event Andrew Poulos <ap_prog@hotmail.com> - 2020-05-20 07:45 +1000
      Re: HTML5 embed element event "Evertjan." <exxjxw.hannivoort@inter.nl.net> - 2020-05-20 00:21 +0200
        Re: HTML5 embed element event rcpj@panix.com (Pierre Jelenc) - 2020-05-20 01:09 +0000
          Re: HTML5 embed element event Andrew Poulos <ap_prog@hotmail.com> - 2020-05-20 18:36 +1000
          Re: HTML5 embed element event "Evertjan." <exxjxw.hannivoort@inter.nl.net> - 2020-05-20 12:36 +0200
  Re: HTML5 embed element event "Michael Haufe (TNO)" <tno@thenewobjective.com> - 2020-05-19 17:21 -0700
    Re: HTML5 embed element event Andrew Poulos <ap_prog@hotmail.com> - 2020-05-20 18:43 +1000
  Re: HTML5 embed element event Thomas 'PointedEars' Lahn <PointedEars@web.de> - 2020-05-21 17:15 +0200
    Re: HTML5 embed element event "Michael Haufe (TNO)" <tno@thenewobjective.com> - 2020-05-21 08:55 -0700
      Re: HTML5 embed element event "Michael Haufe (TNO)" <tno@thenewobjective.com> - 2020-05-21 08:57 -0700
        Re: HTML5 embed element event Thomas 'PointedEars' Lahn <PointedEars@web.de> - 2020-05-21 18:53 +0200
          Re: HTML5 embed element event "Michael Haufe (TNO)" <tno@thenewobjective.com> - 2020-05-21 11:00 -0700
            Re: HTML5 embed element event Thomas 'PointedEars' Lahn <PointedEars@web.de> - 2020-05-21 21:50 +0200
              Re: HTML5 embed element event Thomas 'PointedEars' Lahn <PointedEars@web.de> - 2020-05-21 22:03 +0200
              Re: HTML5 embed element event "Michael Haufe (TNO)" <tno@thenewobjective.com> - 2020-05-21 15:25 -0700
                Re: HTML5 embed element event Thomas 'PointedEars' Lahn <PointedEars@web.de> - 2020-05-23 03:06 +0200

csiph-web